Replace inline global selectors with a modern-ui SCSS mixin

- create a mixin for [Fragment]

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   └── Home.module.scss
│                       ├── Main
│                       │   └── MainView
│                       │       ├── MainView.module.scss
│                       │       └── components
│                       │           └── Header
│                       │               └── Header.module.scss
│                       └── components
│                           └── Layout
│                               └── Footer
│                                   └── Footer.module.scss
└── packages
    └── ui
        └── src
            ├── components
            │   └── editor
            │       ├── common
            │       │   └── DropdownMenu
            │       │       └── DropdownMenu.module.scss
            │       ├── prompt
            │       │   ├── BrowserExtensionMessage
            │       │   │   └── BrowserExtensionMessage.module.scss
            │       │   ├── Configurations
            │       │   │   └── Configurations.module.scss
            │       │   ├── Page
            │       │   │   └── Page.module.scss
            │       │   ├── ResponsePreview
            │       │   │   ├── ResponsePreview.module.scss
            │       │   │   └── components
            │       │   │       ├── FileItem
            │       │   │       │   └── FileItem.module.scss
            │       │   │       └── TextItem
            │       │   │           └── TextItem.module.scss
            │       │   ├── Responses
            │       │   │   └── Responses.module.scss
            │       │   ├── StatusBar
            │       │   │   └── StatusBar.module.scss
            │       │   ├── Tabs
            │       │   │   └── Tabs.module.scss
            │       │   ├── Tasks
            │       │   │   └── Tasks.module.scss
            │       │   └── modals
            │       │       └── OngoingApiCallsModal
            │       │           └── OngoingApiCallsModal.module.scss
            │       └── settings
            │           └── Layout
            │               └── Layout.module.scss
            └── styles
                ├── foundation
                │   ├── _colors.scss
                │   ├── _index.scss
                │   ├── _mixins.scss
                │   └── _variables.scss
                └── global.scss

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/Home.module.scss

@@ -18,7 +18,7 @@
       transform var(--transition-duration-250) var(--transition-timing-function),
       opacity var(--transition-duration-250) var(--transition-timing-function);
 
-    :global([data-modern-ui='true']) & {
+    @include modern-ui {
       padding: 0 10px;
     }
 
@@ -94,7 +94,7 @@
     border-radius: 10px;
     position: relative;
 
-    :global([data-modern-ui='true']) & {
+    @include modern-ui {
       margin: 0 10px;
     }
 

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.module.scss

@@ -4,7 +4,7 @@
   gap: 6px;
   margin: 0 12px;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 0 10px;
   }
 }

apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.module.scss

@@ -7,7 +7,7 @@
   gap: 8px;
   height: var(--height);
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     padding: 0 10px;
   }
 

apps/editor/src/views/prompt/frontend/components/Layout/Footer/Footer.module.scss

@@ -7,7 +7,7 @@
   border-top: 1px solid var(--cwc-border-color-dimmed);
   gap: 4px;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     padding: 6px 4px;
   }
 

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -15,7 +15,7 @@
     box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
     overflow: hidden;
 
-    :global([data-modern-ui='true']) & {
+    @include modern-ui {
       :global {
         .simplebar-track.simplebar-vertical {
           margin: 4px 0;
@@ -81,7 +81,7 @@
   }
 
   &--disabled {
-     opacity: var(--disabled-opacity);
+    opacity: var(--disabled-opacity);
     cursor: default;
   }
 }

packages/ui/src/components/editor/prompt/BrowserExtensionMessage/BrowserExtensionMessage.module.scss

@@ -10,7 +10,7 @@
   border-radius: 6px;
   margin: 0 20px;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 0 18px;
   }
 }

packages/ui/src/components/editor/prompt/Configurations/Configurations.module.scss

@@ -18,7 +18,7 @@
     height: 22px;
     padding: 0 12px;
 
-    :global([data-modern-ui='true']) & {
+    @include modern-ui {
       margin: 0 4px;
       padding: 0 6px;
       border-radius: var(--border-radius-small);
@@ -111,7 +111,7 @@
   background-color: var(--vscode-menu-separatorBackground);
   margin: 4px 0;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 4px 8px;
   }
 }
@@ -126,7 +126,7 @@
   height: 100%;
   color: var(--cwc-text-color-dimmed);
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     padding: 4px 10px 3px 10px;
   }
 }
@@ -135,7 +135,7 @@
   display: flex;
   padding: 10px 12px 0 12px;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     padding: 9px 10px 0 10px;
   }
 

packages/ui/src/components/editor/prompt/Page/Page.module.scss

@@ -13,7 +13,7 @@
   margin: 6px 12px;
   position: relative;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 6px 10px;
   }
 
@@ -31,7 +31,7 @@
   padding: 10px 12px;
   border-top: 1px solid var(--cwc-border-color-dimmed);
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     padding: 10px;
   }
 }

packages/ui/src/components/editor/prompt/ResponsePreview/ResponsePreview.module.scss

@@ -4,7 +4,7 @@
   padding: 4px 0 12px 0;
   gap: 8px;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     padding: 4px 0 10px 0;
   }
 }
@@ -19,7 +19,7 @@
   border-radius: 8px;
   overflow: hidden;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 0 10px;
   }
 
@@ -94,7 +94,7 @@
     -webkit-line-clamp: unset;
   }
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 0 10px;
   }
 
@@ -116,7 +116,7 @@
   border-radius: 6px;
   background-color: var(--cwc-bg-tertiary);
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 0 10px;
   }
 
@@ -209,7 +209,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 4px 10px 0 10px;
   }
 }

packages/ui/src/components/editor/prompt/ResponsePreview/components/FileItem/FileItem.module.scss

@@ -36,7 +36,7 @@
   border-radius: 8px;
   cursor: pointer;
 
-  :global([data-modern-ui='true']) & {
+  @include modern-ui {
     margin: 0 10px;
   }