feat(Modal): add modal border variable and update themed styles

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -7,17 +7,20 @@
     @include modal-button(standard);
   } */
 
-  @include themed {
     padding: 1rem 2rem 5rem;
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     overflow-y: auto;
+
+    @include themed {
+
     background: t($modal-background);
 
     margin: 0;
     border-radius: t($borderRadius);
+      }
 
     @extend %tabText;
 
@@ -32,12 +35,13 @@
       align-items: center;
       justify-content: space-between;
       transition: 0.4s ease-in-out;
-
-      /* border-top: 1px solid #ccc; */
-      border-bottom: 1px solid #676767;
       padding-top: 2rem;
       padding-bottom: 2rem;
 
+      @include themed {
+        border-bottom: 1px solid t($modal-border);
+      }
+
       &.settingsNoBorder {
         border-bottom: none;
       }
@@ -74,7 +78,6 @@
       }
     }
   }
-}
 
 .resetDataButtonsLayout {
   display: grid;

src/scss/_variables.scss

@@ -14,6 +14,7 @@ $modal-background: 'modal-background';
 $modal-text: 'modal-text';
 $modal-sidebar: 'modal-sidebar';
 $modal-sidebarActive: 'modal-sidebarActive';
+$modal-border: 'modal-border';
 $link: 'link';
 $weather: 'weather';
 $modal-secondaryColour: 'modal-secondaryColour';
@@ -67,6 +68,7 @@ $themes: (
     'modal-sidebar': #feffff,
     'modal-sidebarActive': #f5f5f5,
     'modal-secondaryColour': #fafafa,
+    'modal-border': rgba(0, 0, 0, 0.10),
     'link': #ff5c25,
     'slightGradient': linear-gradient(#fff, #ddd),
   ),
@@ -84,6 +86,7 @@ $themes: (
     'modal-sidebar': #151515,
     'modal-sidebarActive': #262626,
     'modal-secondaryColour': #111,
+    'modal-border': rgba(255, 255, 255, 0.10),
     'link': #ff5c25,
     'slightGradient': linear-gradient(#0e1013, #322a2a),
   ),