Merge pull request #9 from encryption4all/fix-design-improvements

Fix design improvements

Author: rubenhensen

src/lib/components/Chip.svelte

@@ -110,8 +110,8 @@
 
     button.chip-default:hover:not(:disabled) {
         background-color: var(--pg-soft-background);
-        border-color: var(--pg-accent-color);
-        color: var(--pg-accent-color);
+        border-color: var(--pg-primary);
+        color: var(--pg-primary);
         box-shadow: 0 2px 4px rgba(48, 149, 222, 0.15);
     }
 

src/lib/components/HelpToggle.svelte

@@ -94,7 +94,7 @@
     .help-link {
         display: inline-block;
         font-size: 0.85rem;
-        color: var(--pg-accent-color);
+        color: var(--pg-primary);
         font-family: var(--pg-font-family);
         font-weight: 600;
         text-decoration: none;

src/lib/components/Tabs.svelte

@@ -55,7 +55,7 @@
                 z-index: -1;
                 bottom: -3px;
                 height: 0;
-                border: 2px solid rgba(var(--pg-accent-color-rgb), 50%);
+                border: 2px solid rgba(var(--pg-primary-rgb), 50%);
                 border-radius: 10px;
             }
         }

src/lib/components/filesharing/SendButton.svelte

@@ -536,7 +536,7 @@
     right: 0;
     bottom: 0;
     background: rgba(3, 14, 23, 0.09);
-    z-index: 999;
+    z-index: 3;
     cursor: pointer;
   }
 
@@ -548,7 +548,7 @@
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     padding: 1rem 1.5rem 1.5rem 1.5rem;
     width: var(--popup-width);
-    z-index: 10000;
+    z-index: 4;
   }
 
   .popup-content {
@@ -610,7 +610,7 @@
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
-    z-index: 9999;
+    z-index: 3;
   }
 
   .mobile-bottom-sheet {
@@ -622,7 +622,7 @@
     border-radius: var(--pg-border-radius-lg) var(--pg-border-radius-lg) 0 0;
     box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
     padding: 1.5rem;
-    z-index: 10000;
+    z-index: 4;
   }
 
   .bottom-sheet-content {

src/lib/components/header/Hamburger.svelte

@@ -109,7 +109,7 @@
         margin: 0;
         width: 100%;
         height: 100%;
-        z-index: 1000;
+        z-index: 4;
     }
 
     .hamburger-menu.open {

src/lib/global.scss

@@ -22,6 +22,7 @@ body {
     margin: 0;
     overflow-x: hidden;
     background: var(--pg-general-background);
+    z-index: -5;
 }
 
 :root {
@@ -162,8 +163,8 @@ input.pg-input:focus,
 select.pg-input:focus,
 textarea.pg-input:focus {
     outline: none;
-    border-color: var(--pg-accent-color);
-    box-shadow: 0 0 0 3px rgba(var(--pg-accent-color-rgb), 0.1);
+    border-color: var(--pg-primary);
+    box-shadow: 0 0 0 3px rgba(var(--pg-primary-rgb), 0.1);
 }
 
 input.pg-input:invalid:not(:focus):not(:placeholder-shown),
@@ -183,14 +184,6 @@ textarea.pg-input:disabled {
   box-sizing: border-box;
 }
 
-.lazyload {
-    opacity: 0;
-}
-
-.lazyloading {
-    opacity: 1;
-    transition: opacity 250ms;
-}
 
 h1,
 h2,
@@ -208,10 +201,12 @@ label, td, tr, summary {
 
 p {
     font-size: 16px;
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
 }
 
 a {
-    text-decoration-color: var(--pg-accent-color);
+    text-decoration-color: var(--pg-primary);
 }
 
 h2 {
@@ -328,9 +323,10 @@ h3 {
         inline-size: 350px;
         overflow-wrap: break-word;
         margin-bottom: 0;
+        z-index: 0;
 
         span {
-            background-color: transparent;
+            background-color: var(--pg-general-background);
             padding-right: 10px;
         }
 
@@ -341,7 +337,7 @@ h3 {
             left: 0;
             right: 50px;
             height: 4px;
-            background-color: var(--pg-accent-color);
+            background-color: var(--pg-primary);
             border-radius: 3.5px;
             z-index: -1;
         }

src/routes/about/+page.svelte

@@ -3,11 +3,10 @@
     import aboutImg from '$lib/assets/images/about.svg'
 </script>
 
-<div class="about-container">
-    <div class="about-content">
-        <h2 class="page-title"><span>{$_('about.title')}</span></h2>
-
-        <div class="content-grid">
+<div class="page-wrapper">
+    <div class="grid-container">
+        <div class="grid-item header">
+            <h2><span>{$_('about.title')}</span></h2>
             <div class="text-content">
                 <h3>{$_('about.subtitle1')}</h3>
                 <p>
@@ -22,70 +21,54 @@
                     {$_('about.subpar3')}
                 </p>
             </div>
-
-            <div class="image-content">
-                <img
-                    src={aboutImg}
-                    alt="about"
-                    class="invert"
-                />
-                
-            </div>
+        </div>
+        <div class="grid-item content-box">
+            <img
+                src={aboutImg}
+                alt="about"
+                class="invert"
+            />
             <div id="team">
-                    <h3>{$_('about.team.header')}</h3>
-                    <p>
-                        {@html $_('about.team.par')}
-                    </p>
+                <h3>{$_('about.team.header')}</h3>
+                <p>
+                    {@html $_('about.team.par')}
+                </p>
             </div>
         </div>
     </div>
 </div>
 
 <style lang="scss">
-    .image-content{ 
-        display: flex;
-        justify-content: center
-    }
-
-    img {
-        width: 100%;
-    }
-    .about-container {
+    .page-wrapper {
+        height: 100%;
         display: flex;
+        align-items: center;
         justify-content: center;
-        align-items: flex-start;
-        width: 100%;
-        height: calc(100vh - 52px - 0.5rem - 1rem);
-        overflow-y: auto;
-        padding: 2rem 1rem;
-    }
-
-    .about-content {
-        max-width: 1100px;
-        width: 100%;
     }
 
-    .page-title {
-        text-align: center;
-        margin-bottom: 2rem;
+    .grid-item {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
-    .content-grid {
+    .grid-container {
         display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 4rem;
+        grid-template-columns: repeat(2, minmax(0, 550px));
+        height: auto;
         align-items: start;
+        overflow-y: auto;
     }
 
-    .text-content {
-        text-align: left;
+    img {
+        width: 90%;
+        margin-bottom: 1rem;
+    }
 
+    .text-content {
         h3 {
             margin-top: 1.5rem;
             margin-bottom: 0.5rem;
-            font-size: 1.1rem;
-            font-weight: 700;
-            color: var(--pg-text);
         }
 
         h3:first-child {
@@ -99,19 +82,17 @@
         }
     }
 
-    .image-content {
-        text-align: left;
-
-        img {
-            max-width: 100%;
-            height: auto;
-        }
+    .content-box {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
     }
 
     #team {
-        border: 1px dashed var(--pg-text);
-        border-radius: 16px; 
-        padding: 1.5rem 2rem;
+        border: 1px dashed black;
+        border-radius: 8px;
+        padding: 20px;
 
         h3 {
             margin-top: 0;
@@ -126,17 +107,8 @@
     }
 
     @media only screen and (max-width: 800px) {
-        .about-container {
-            padding: 1rem 0.5rem;
-        }
-
-        .about-content {
-            width: 96%;
-        }
-
-        .content-grid {
+        .grid-container {
             grid-template-columns: 1fr;
-            gap: 2rem;
         }
     }
 </style>