feat(theme): dark theme update v3

jotform · Sep 30, 2021 · 939fca0 · 939fca0
1 parent b0db06a
commit 939fca0
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 39 deletions.
diff --git a/src/constants/reportLayoutSettings.js b/src/constants/reportLayoutSettings.js
@@ -1,3 +1,5 @@
+import { divider } from '../utils/staticSettings';
+
 const onChange = (id, { reportCustomLayout }, updater) => {
   const [reportLayoutWidth, reportLayoutHeight] = reportCustomLayout.split('x');
   updater(id, {
@@ -146,4 +148,7 @@ export default [
     uniqueId: 'reportCustomLayout_2',
     value,
   },
+  {
+    ...divider('General'),
+  },
 ];
diff --git a/src/constants/reportSettings.js b/src/constants/reportSettings.js
@@ -40,9 +40,6 @@ export const reportSettings = {
       section: 'Style',
       type: 'colorPicker',
     },
-    {
-      ...divider('General'),
-    },
     {
       ...divider('Style'),
     },

diff --git a/src/styles/_jfDarkTheme.scss b/src/styles/_jfDarkTheme.scss
@@ -1,13 +1,34 @@
+/* stylelint-disable no-descending-specificity */
+
 .darkMode {
   .jfReport-toolbox, .jfPresentation-toolbox {
     background-color: #565F6E;
   }
 
-
   .jfReport-pane {
     .toolSection-dropdown, .toolSection-input {
       background-color: #555F6E;
+    }
+    .toolSection-dropdown, .toolSection-input, .colorPicker-wrapper {
       border-color: #303339;
+      color: $white;
+
+      &:hover {
+        border-color: darken(#303339, 10);
+      }
+    }
+
+    .forSubWrapper {
+      background-color: #303339;
+      color: #B4B9BE;
+
+      .icon-arrow {
+        height: 12px;
+      }
+
+      &:hover {
+        background-color: #4C5360;
+      }
     }
 
     ::-webkit-scrollbar-thumb {
@@ -99,6 +120,16 @@
       }
     }
 
+    .jfReportAccordion label {
+      background-color: #394049;
+      border-bottom-color: #4C5360;
+      color: $white;
+
+      &:after {
+        border-bottom-color: #fff;
+      }
+    }
+
     .toolTabs label {
       background-color: #394049;
       color: $white;
@@ -248,15 +279,23 @@
     }
 
     .colorPicker-wrapper {
-      background-color: $inputGray;
-      border: 1px solid #ccc;
+      background-color: #555F6E;
+      border: 1px solid #303339;
+
+      .toolSection-input {
+        border-right-color: #303339;
+      }
     }
 
     .hasUnit:after {
       color: $infoGray;
     }
 
     .toolSection-dropdownWrapper {
+      &:before {
+        border-top-color: #303339;
+      }
+
       &:after {
         background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
       }

diff --git a/src/styles/_jfLightTheme.scss b/src/styles/_jfLightTheme.scss
@@ -1,5 +1,7 @@
+/* stylelint-disable no-descending-specificity */
+
 .lightMode {
-  .jfReport-pane, .jfPresentation-pane {
+  .jfReport-toolbox, .jfPresentation-toolbox {
     background-color: #f1f1f5;
   }
 
@@ -82,6 +84,15 @@
       }
     }
 
+    &.jfReport-settings {
+      background-color: $white;
+    }
+
+    .jfReportAccordion label {
+      background-color: #EFEFF6;
+      border-bottom-color: #DDE0EA;
+    }
+
     .toolTabs label {
       background-color: $white;
       color: #2a3244;
@@ -217,13 +228,21 @@
     .colorPicker-wrapper {
       background-color: $inputGray;
       border: 1px solid #ccc;
+
+      .toolSection-input {
+        border-right-color: $inputGray;
+      }
     }
 
     .hasUnit:after {
       color: $infoGray;
     }
 
     .toolSection-dropdownWrapper {
+      &:before {
+        border-top-color: #564632;
+      }
+
       &:after {
         background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 16 9'%3E%3Cpath fill-rule='evenodd' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
       }

diff --git a/src/styles/_jfReportsAccordion.scss b/src/styles/_jfReportsAccordion.scss
@@ -39,22 +39,25 @@
   }
   label {
     position: relative;
+    display: flex;
+    align-items: center;
     cursor: pointer;
-    background-color: #EFEFF6;
     padding: 13px 20px;
-    border-bottom: 1px solid #DDE0EA;
+    padding: 5px 20px;
+    height: 55px;
+    border-bottom: 1px solid;
     transition: $transition;
 
     &:after {
       content: "";
       position: absolute;
       top: calc(50% - 3px);
       right: 20px;
-      width: 10px;
-      height: 6px;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 16 9'%3E%3Cpath fill='%232b3245' fill-rule='evenodd' d='M242.656854,19.2928932 C243.047379,18.9023689 243.680544,18.9023689 244.071068,19.2928932 C244.461592,19.6834175 244.461592,20.3165825 244.071068,20.7071068 L238.414214,26.363961 L244.071068,32.0208153 C244.461592,32.4113396 244.461592,33.0445046 244.071068,33.4350288 C243.680544,33.8255531 243.047379,33.8255531 242.656854,33.4350288 L236.292893,27.0710678 C235.902369,26.6805435 235.902369,26.0473785 236.292893,25.6568542 L242.656854,19.2928932 Z' transform='rotate(-90 113.182 131.364)'/%3E%3C/svg%3E%0A");
-      transform: rotateX(0deg);
-      opacity: .4;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 7px solid;
       transition: $transition;
     }
 

diff --git a/src/styles/_jfReportsHelpers.scss b/src/styles/_jfReportsHelpers.scss
@@ -14,7 +14,7 @@
 @mixin inputDefault {
   background-color: $inputGray;
   border: 1px solid $inputGrayBorder;
-  border-radius: 4px;
+  border-radius: 2px;
   transition: .3s ease-in-out;
 
   &:hover {

diff --git a/src/styles/_jfReportsMain.scss b/src/styles/_jfReportsMain.scss
@@ -20,12 +20,10 @@ body {
   }
 
   &-toolbox {
-    border-right: 1px solid #B1B2C3;
     box-shadow: 5px 0 0 0 rgba(106, 110, 143, 0.1);
   }
 
   &-settings {
-    border-left: 1px solid #B1B2C3;
     box-shadow: -3px 0 0 0 rgba(106, 110, 143, 0.1);
   }
 

diff --git a/src/styles/_jfReportsPanelElements.scss b/src/styles/_jfReportsPanelElements.scss
@@ -35,9 +35,14 @@
     }
 
     &-list, &-dropdown, &-input {
+      font-size: 0.938rem;
       @include inputDefault;
     }
 
+    &-dropdown, &-input {
+      height: 40px;
+    }
+
     &-listItem {
       padding: 1px;
       background-color: transparent;
@@ -492,12 +497,9 @@
       }
 
       .toolSection-input {
-        // max-width: calc(100% - 42px);
         height: 38px;
-        padding: 10px;
-        // margin: 0 5px;
         border: none;
-        border-right: 1px solid #303339;
+        border-right: 1px solid;
         background-color: transparent;
         border-radius: 0;
       }
@@ -571,37 +573,36 @@
 .toolSection-dropdownWrapper {
   position: relative;
 
+  &:before, &:after {
+    content: "";
+    position: absolute;
+  }
+
   &:before {
     display: inline-block;
-    content: "";
     width: 0;
     height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 9px solid #564632;
-    position: absolute;
-    top: 12px;
-    right: 10px;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 7px solid;
+    top: calc(50% - 4px);
+    right: 14px;
   }
 
   &:after {
     display: inline-block;
-    content: "";
-    position: absolute;
     width: 1px;
     top: 0;
     bottom: 0;
     background-color: #303339;
-    right: 32px;
+    right: 38px;
     background-image: none;
   }
 
   .toolSection-dropdown {
-    font-size: 0.875rem;
     width: 100%;
-    height: 34px;
     cursor: pointer;
-    padding: 2px 8px;
+    padding: 2px 10px;
     appearance: none;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-appearance: none;

diff --git a/src/styles/_jfReportsPanels.scss b/src/styles/_jfReportsPanels.scss
@@ -8,7 +8,7 @@
   position: absolute;
 
   &-pane {
-    font-size: 0.875rem;
+    font-size: 0.938rem;
 
     // Panel Layout //
 
@@ -126,10 +126,10 @@
 
       & + hr {
         border: none;
-        margin: 30px -10px 0;
+        margin: 20px -10px 0;
 
         & + .toolSection {
-          margin-top: 30px;
+          margin-top: 20px;
         }
 
         & + hr {
@@ -449,7 +449,7 @@
     }
 
     &.forSettings .toolItem-tabContent {
-      padding: 30px 10px 0;
+      padding: 25px 10px 0;
     }
 
     // Panel Open & Hide Actions //

diff --git a/src/styles/_jfReportsSVG.scss b/src/styles/_jfReportsSVG.scss
@@ -162,7 +162,7 @@
   }
 
   .icon-dots {
-    width: 3px;
+    width: 4px;
     height: 16px;
   }