feat(style): new style proposal

src/components/settings/settings/EditSettingsForm.tsx

@@ -819,6 +819,8 @@ class EditSettingsForm extends Component<IProps, IState> {
                   </>
                 )}
 
+                <Toggle {...form.$('webviewPadding').bind()} />
+
                 {isSplitModeEnabled && <Hr />}
                 <Toggle {...form.$('splitMode').bind()} />
                 {isSplitModeEnabled && (

src/config.ts

@@ -375,6 +375,7 @@ export const DEFAULT_APP_SETTINGS = {
   spellcheckerLanguage: 'en-us',
   darkMode: false,
   navigationBarManualActive: false,
+  webviewPadding: true,
   splitMode: false,
   splitColumns: 3,
   fallbackLocale: 'en-US',

src/containers/settings/EditSettingsScreen.tsx

@@ -211,6 +211,10 @@ const messages = defineMessages({
     id: 'settings.app.form.universalDarkMode',
     defaultMessage: 'Enable universal Dark Mode',
   },
+  webviewPadding: {
+    id: 'settings.app.form.webviewPadding',
+    defaultMessage: 'Show margins around Webview',
+  },
   splitMode: {
     id: 'settings.app.form.splitMode',
     defaultMessage: 'Enable Split View Mode',
@@ -467,6 +471,7 @@ class EditSettingsScreen extends Component<
       darkMode: Boolean(settingsData.darkMode),
       adaptableDarkMode: Boolean(settingsData.adaptableDarkMode),
       universalDarkMode: Boolean(settingsData.universalDarkMode),
+      webviewPadding: Boolean(settingsData.webviewPadding),
       splitMode: Boolean(settingsData.splitMode),
       splitColumns: Number(settingsData.splitColumns),
       serviceRibbonWidth: Number(settingsData.serviceRibbonWidth),
@@ -1095,6 +1100,15 @@ class EditSettingsScreen extends Component<
           default: DEFAULT_APP_SETTINGS.universalDarkMode,
           type: 'checkbox',
         },
+        webviewPadding: {
+          label: intl.formatMessage(messages.webviewPadding),
+          value: ifUndefined<boolean>(
+            settings.all.app.webviewPadding,
+            DEFAULT_APP_SETTINGS.webviewPadding,
+          ),
+          default: DEFAULT_APP_SETTINGS.webviewPadding,
+          type: 'checkbox',
+        },
         splitMode: {
           label: intl.formatMessage(messages.splitMode),
           value: ifUndefined<boolean>(

src/features/appearance/index.ts

@@ -15,6 +15,12 @@ import { userDataPath } from '../../environment-remote';
 
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
+// The padding is 6px. We multiply because when we sum, we want to get
+// the value of the left and right side when using on width
+// and the value of the top and bottom side when using on height
+// So we get a total of 12px
+const PADDING = 6 * 2;
+
 const createStyleElement = () => {
   const styles = document.createElement('style');
   styles.id = STYLE_ELEMENT_ID;
@@ -144,6 +150,7 @@ const generateServiceRibbonWidthStyle = (
   grayscaleServicesDim,
   shouldShowDragArea,
   isFullScreen,
+  webviewPadding,
 ) => {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
@@ -231,7 +238,7 @@ const generateServiceRibbonWidthStyle = (
   return horizontal
     ? `
     .sidebar {
-      height: ${width}px !important;
+      height: ${width + PADDING}px !important;
       overflow: hidden !important;
     }
     .sidebar div {
@@ -250,15 +257,12 @@ const generateServiceRibbonWidthStyle = (
     .tab-item .tab-item__label {
       font-size: ${fontSize}px !important;
     }
-    .tab-item.is-label-enabled {
-      padding-top: 6px !important;
-      padding-bottom: 2px !important;
-    }
     .sidebar__button {
       font-size: ${width / 3}px !important;
+      line-height: 0;
     }
     .app .app__content {
-      padding-top: ${width + sidebarSizeBias}px !important;
+      padding-top: ${width + sidebarSizeBias + PADDING}px !important;
     }
     .workspaces-drawer {
       margin-top: -${width}px !important;
@@ -289,10 +293,16 @@ const generateServiceRibbonWidthStyle = (
     .tab-item div {
       overflow: hidden !important;
     }
+    .services__webview-wrapper {
+      padding: ${webviewPadding ? '6px' : '0px'};
+    }
+    .services__webview-wrapper webview {
+      border-radius: ${webviewPadding ? '4px' : '0px'};
+    }
   `
     : `
     .sidebar {
-      width: ${width}px !important;
+      width: ${width + PADDING}px !important;
     }
     .tabs {
       justify-content: ${sidebarServicesAlignment};
@@ -312,6 +322,12 @@ const generateServiceRibbonWidthStyle = (
     .todos__todos-panel--expanded {
       width: calc(100% - ${300 + width}px) !important;
     }
+    .services__webview-wrapper {
+      padding: ${webviewPadding ? '6px' : '0px'};
+    }
+    .services__webview-wrapper webview {
+      border-radius: ${webviewPadding ? '4px' : '0px'};
+    }
   `;
 };
 
@@ -361,7 +377,7 @@ const generateVerticalStyle = (widthStr, alwaysShowWorkspaces) => {
   }
 
   .workspaces-drawer {
-    margin-top: -${sidebarWidth - verticalStyleOffset - 1}px !important;
+    margin-top: -${sidebarWidth + verticalStyleOffset - 13}px !important;
   }
 
   .todos__todos-panel--expanded {
@@ -396,6 +412,7 @@ const generateStyle = (settings, app) => {
     useHorizontalStyle,
     alwaysShowWorkspaces,
     showServiceName,
+    webviewPadding,
   } = settings;
 
   const { isFullScreen } = app;
@@ -418,6 +435,7 @@ const generateStyle = (settings, app) => {
     grayscaleServicesDim,
     shouldShowDragArea,
     isFullScreen,
+    webviewPadding,
   );
 
   if (shouldShowDragArea) {
@@ -475,6 +493,7 @@ export default function initAppearance(stores) {
       settings.all.app.useHorizontalStyle,
       settings.all.app.alwaysShowWorkspaces,
       settings.all.app.showServiceName,
+      settings.all.app.webviewPadding,
       app.isFullScreen,
     ],
     () => {

src/i18n/locales/en-US.json

@@ -279,6 +279,7 @@
   "settings.app.form.wakeUpHibernationStrategy": "Hibernation strategy after automatic wake up",
   "settings.app.form.wakeUpStrategy": "Wake up strategy",
   "settings.app.form.webRTCIPHandlingPolicy": "WebRTC IP Handling Policy",
+  "settings.app.form.webviewPadding": "Show margins around Webview",
   "settings.app.headlineAdvanced": "Advanced",
   "settings.app.headlineAppearance": "Appearance",
   "settings.app.headlineGeneral": "General",

src/i18n/locales/pt-BR.json

@@ -261,6 +261,7 @@
   "settings.app.form.wakeUpHibernationStrategy": "Estratégia de hibernação após acordar automaticamente",
   "settings.app.form.wakeUpStrategy": "Estratégia de despertar",
   "settings.app.form.webRTCIPHandlingPolicy": "Política de gerenciamento IP WebRTC",
+  "settings.app.form.webviewPadding": "Mostrar margens ao redor da Webview",
   "settings.app.headlineAdvanced": "Avançado",
   "settings.app.headlineAppearance": "Aparência",
   "settings.app.headlineGeneral": "Geral",

src/i18n/locales/pt.json

@@ -260,6 +260,7 @@
   "settings.app.form.wakeUpHibernationStrategy": "Estratégia de hibernação após acordar automaticamente",
   "settings.app.form.wakeUpStrategy": "Estratégia de despertar",
   "settings.app.form.webRTCIPHandlingPolicy": "Política de exposição do IP WebRTC",
+  "settings.app.form.webviewPadding": "Mostrar margens ao redor da Webview",
   "settings.app.headlineAdvanced": "Avançado",
   "settings.app.headlineAppearance": "Aparência",
   "settings.app.headlineGeneral": "Geral",

src/styles/layout.scss

@@ -37,6 +37,10 @@ html {
     .sidebar__button {
       color: $dark-theme-gray-lighter;
 
+      &:first-of-type {
+        box-shadow: -4px 0px 4px 0px $dark-theme-gray-darker;
+      }
+
       &:hover,
       &:active {
         color: $dark-theme-gray-smoke;
@@ -52,6 +56,10 @@ html {
         filter: grayscale(1);
       }
     }
+
+    .sidebar__button--workspaces.is-active {
+      box-shadow: -4px 0px 4px 0px $dark-theme-gray-darker;
+    }
   }
 
   .app-loader .app-loader__title {
@@ -102,6 +110,7 @@ body.win32:not(.isFullScreen) .app .app__content {
 
 .app {
   background: #fff;
+
   .app__content {
     display: flex;
     width: calc(100% + 300px);

src/styles/services.scss

@@ -51,6 +51,10 @@
 
   .services__webview-wrapper {
     background: $theme-gray-lighter;
+
+    webview {
+      overflow: hidden;
+    }
   }
 
   .services__webview,

src/styles/tabs.scss

@@ -16,6 +16,8 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 1;
+  padding: 6px;
+  gap: 6px;
 
   .placeholder {
     height: 40px;
@@ -31,19 +33,20 @@
   min-height: 50px;
   position: relative;
   flex-direction: column;
+  width: $theme-sidebar-width;
+  border-radius: 4px;
+  padding: 4px;
+
   @media (prefers-reduced-motion: no-preference) {
     transition: background $theme-transition-time;
   }
-  width: $theme-sidebar-width;
 
   &.is-active {
     background: change-color(
       $theme-brand-primary,
       $lightness: min(lightness($theme-brand-primary) * 1.35, 100)
     );
 
-    box-shadow: inset 4px 0 0 0 $theme-brand-primary;
-
     .tab-item__icon,
     .tab-item__label {
       margin-left: 0px;
@@ -53,8 +56,6 @@
   &.is-label-enabled {
     height: min-content;
     overflow: hidden;
-    padding-top: 8px;
-    padding-bottom: 8px;
   }
 
   .tab-item__label {

src/styles/vertical.scss

@@ -30,12 +30,13 @@ $tabitem-bias: 30px;
 
   .tabs {
     flex-direction: row;
+    overflow-y: hidden;
+    overflow-x: scroll;
 
     .tab-item {
       &.is-active {
-        box-shadow: inset 0 4px 0 0 $theme-brand-primary;
         overflow: hidden;
-        height: $sidebar-width + 4;
+        height: $sidebar-width;
       }
 
       &.is-label-enabled {
@@ -44,9 +45,6 @@ $tabitem-bias: 30px;
         height: $sidebar-width + 10;
         width: max-content !important;
         overflow: hidden;
-        padding-left: 4px;
-        padding-right: 4px;
-        padding-top: 8px;
       }
 
       .tab-item__icon {
@@ -57,16 +55,26 @@ $tabitem-bias: 30px;
         padding: 0;
       }
     }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
   div {
     overflow: hidden !important;
   }
 
+  .sidebar__button:first-of-type {
+    height: 100%;
+    box-shadow: -4px 0px 4px 0px $theme-gray-lightest;
+  }
+
   .sidebar__button--workspaces.is-active {
     position: absolute;
     right: 300px;
     height: 100%;
     background-color: #f7f7f9;
+    box-shadow: -4px 0px 4px 0px $theme-gray-lightest;
   }
 }