Font adjustments in themes (Velocidex#2242)

* Font adjustments in themes * Specified font-weight per theme
apersonintech · Nov 14, 2022 · ed7c640 · ed7c640
1 parent bebffc2
commit ed7c640
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 49 deletions.
diff --git a/gui/velociraptor/src/components/artifacts/reporting.css b/gui/velociraptor/src/components/artifacts/reporting.css
@@ -3,12 +3,12 @@
 }
 
 .report-viewer h1 {
-        font-size: 32px;
+        font-size: 24px;
         margin-top: 1rem;
         margin-bottom: 1rem;
 }
 .report-viewer h2 {
-        font-size: 24px;
+        font-size: 22px;
         margin-top: 1rem;
         margin-bottom: 1rem;
 }
@@ -22,7 +22,7 @@
         margin-bottom: 1rem;
 }
 .report-viewer h5 {
-        font-size: 14px;
+        font-size: 16px;
         margin-bottom: 1rem;
 }
 

diff --git a/gui/velociraptor/src/components/core/user.js b/gui/velociraptor/src/components/core/user.js
@@ -44,7 +44,7 @@ export class UserSettings extends React.Component {
             document.body.classList.remove('github-dimmed-light');
             document.body.classList.remove('ncurses');
             document.body.classList.remove('coolgray-dark');
-            document.body.classList.add(traits.theme || "no-theme");
+            document.body.classList.add(traits.theme || "veloci-light");
         });
     }
 

diff --git a/gui/velociraptor/src/components/users/user-label.js b/gui/velociraptor/src/components/users/user-label.js
@@ -112,7 +112,7 @@ class UserSettings extends React.PureComponent {
     componentDidMount = () => {
         if (this.context.traits) {
             this.setState({
-                theme: this.context.traits.theme || "no-theme",
+                theme: this.context.traits.theme || "veloci-light",
                 timezone: this.context.traits.timezone || "UTC",
                 lang: this.context.traits.lang || "en",
                 org: this.context.traits.org || "root",
@@ -208,14 +208,14 @@ class UserSettings extends React.PureComponent {
                                           theme: e.currentTarget.value,
                                       });
                                   }}>
-                      <option value="no-theme">{T("Default Velociraptor")}</option>
                       <option value="veloci-light">{T("Velociraptor (light)")}</option>
                       <option value="veloci-dark">{T("Velociraptor (dark)")}</option>
                       {/* <option value="github-dimmed-light">Github dimmed (light)</option> */}
                       <option value="github-dimmed-dark">{T("Github dimmed (dark)")}</option>
                       <option value="ncurses">{T("Ncurses (light)")}</option>
                       <option value="coolgray-dark">{T("Cool Gray (dark)")}</option>
                       <option value="pink-light">{T("Strawberry Milkshake (light)")}</option>
+                      <option value="no-theme">{T("Velociraptor Classic (light)")}</option>
                     </Form.Control>
                   </Col>
                 </Form.Group>

diff --git a/gui/velociraptor/src/fonts/atkinson-hyperlegible-bold-102a.woff2 b/gui/velociraptor/src/fonts/atkinson-hyperlegible-bold-102a.woff2
diff --git a/gui/velociraptor/src/fonts/atkinson-hyperlegible-regular-102a.woff2 b/gui/velociraptor/src/fonts/atkinson-hyperlegible-regular-102a.woff2
diff --git a/gui/velociraptor/src/fonts/roboto-v30-latin-ext_latin-700.woff2 b/gui/velociraptor/src/fonts/roboto-v30-latin-ext_latin-700.woff2
diff --git a/gui/velociraptor/src/fonts/roboto-v30-latin-ext_latin-regular.woff2 b/gui/velociraptor/src/fonts/roboto-v30-latin-ext_latin-regular.woff2
diff --git a/gui/velociraptor/src/themes/coolgray-dark.css b/gui/velociraptor/src/themes/coolgray-dark.css
@@ -26,7 +26,7 @@
     "Ubuntu Mono", Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family-monospace: iosevka, SFMono-Regular, Menlo, Monaco,
     "Ubuntu Mono", Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-family-paragraph: -apple-system, BlinkMacSystemFont, iosevka, "Segoe UI",
+  --font-family-paragraph: iosevka, -apple-system, BlinkMacSystemFont, "Segoe UI",
     "Helvetica Neue", Arial, sans-serif;
 
   --color-foreground: rgb(240, 242, 244);
@@ -114,6 +114,7 @@ body.coolgray-dark {
   background: var(--color-canvas-background);
   font-family: var(--font-family-sans-serif);
   font-size: var(--font-size-base);
+  font-weight: 500;
   letter-spacing: 0.4px;
 }
 
@@ -131,7 +132,7 @@ body.coolgray-dark {
 .coolgray-dark dl {
   font-family: var(--font-family-sans-serif);
   font-size: var(--font-size-base);
-  font-weight: 400;
+  font-weight: 500;
   letter-spacing: 0.4px;
 }
 
@@ -456,7 +457,7 @@ body.coolgray-dark {
 .coolgray-dark .table-bordered {
   border: 1px solid var(--color-btn-default-border);
   box-shadow: none;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .coolgray-dark .table-bordered .notebook-filter td {
@@ -468,7 +469,7 @@ body.coolgray-dark {
   background: var(--color-canvas-background);
   color: var(--color-foreground);
   vertical-align: middle;
-  font-weight: 400;
+  font-weight: 500;
   font-size: var(--font-size-base);
   text-shadow: none;
   box-shadow: none;
@@ -580,7 +581,7 @@ body.coolgray-dark {
 
 .coolgray-dark .card-body dt,
 .coolgray-dark .card-body label {
-  font-weight: 400;
+  font-weight: 500;
   color: var(--color-accent-100);
 }
 
@@ -716,7 +717,7 @@ body.coolgray-dark {
   box-shadow: none;
   color: var(--color-foreground);
   text-shadow: none;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 /* Artifact viewer screen */

diff --git a/gui/velociraptor/src/themes/no-theme.css b/gui/velociraptor/src/themes/no-theme.css
@@ -1,3 +1,25 @@
+@font-face {
+    font-family: "roboto";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+      url("../fonts/roboto-v30-latin-ext_latin-regular.woff2") format("woff2");
+    font-display: block;
+  }
+
+  @font-face {
+    font-family: "roboto";
+    font-style: bold;
+    font-weight: 700;
+    src: local(""),
+      url("../fonts/roboto-v30-latin-ext_latin-700.woff2") format("woff2");
+    font-display: block;
+  }
+
+body.no-theme {
+    font-family: roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, sans-serif;
+}
 
 .no-theme .btn.btn-default {
     background-image: linear-gradient(180deg,#fff 0,#e0e0e0);

diff --git a/gui/velociraptor/src/themes/pink-light.css b/gui/velociraptor/src/themes/pink-light.css
@@ -1,30 +1,38 @@
 @font-face {
-  font-family: "atkinson";
+  font-family: "iosevka";
   font-style: normal;
   font-weight: 400;
   src: local(""),
-    url("../fonts/atkinson-hyperlegible-regular-102a.woff2") format("woff2");
-  size-adjust: 110%;
+    url("../fonts/iosevka-term-extended-subset.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0100-017F;
   font-display: block;
 }
 
 @font-face {
   font-family: "iosevka";
+  font-style: bold;
+  font-weight: 700;
+  src: local(""),
+    url("../fonts/iosevka-term-extendedbold-subset.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0100-017F;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "roboto";
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   src: local(""),
-    url("../fonts/iosevka-term-extendedmedium-subset.woff2") format("woff2");
-    unicode-range: U+0000-00FF, U+0100-017F;
+    url("../fonts/roboto-v30-latin-ext_latin-regular.woff2") format("woff2");
   font-display: block;
 }
 
 @font-face {
-  font-family: "iosevka";
+  font-family: "roboto";
   font-style: bold;
   font-weight: 700;
   src: local(""),
-    url("../fonts/iosevka-term-extendedbold-subset.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0100-017F;
+    url("../fonts/roboto-v30-latin-ext_latin-700.woff2") format("woff2");
   font-display: block;
 }
 
@@ -36,7 +44,7 @@
     "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-family-monospace: iosevka, SFMono-Regular, Menlo, Monaco,
     "Ubuntu Mono", Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-family-paragraph: atkinson, -apple-system, BlinkMacSystemFont, iosevka, "Segoe UI",
+  --font-family-paragraph: roboto, -apple-system, BlinkMacSystemFont, iosevka, "Segoe UI",
     "Helvetica Neue", Arial, sans-serif;
 
   --color-foreground: #121212;
@@ -121,6 +129,7 @@ body.pink-light {
   background: var(--color-canvas-background);
   font-family: var(--font-family-sans-serif);
   font-size: var(--font-size-base);
+  font-weight: 400;
   letter-spacing: 0.4px;
 }
 

diff --git a/gui/velociraptor/src/themes/veloci-dark.css b/gui/velociraptor/src/themes/veloci-dark.css
@@ -1,13 +1,3 @@
-@font-face {
-  font-family: "atkinson";
-  font-style: normal;
-  font-weight: 400;
-  src: local(""),
-    url("../fonts/atkinson-hyperlegible-regular-102a.woff2") format("woff2");
-  size-adjust: 110%;
-  font-display: block;
-}
-
 @font-face {
   font-family: "iosevka";
   font-style: normal;
@@ -28,6 +18,24 @@
   font-display: block;
 }
 
+@font-face {
+  font-family: "roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+    url("../fonts/roboto-v30-latin-ext_latin-regular.woff2") format("woff2");
+  font-display: block;
+}
+
+@font-face {
+  font-family: "roboto";
+  font-style: bold;
+  font-weight: 700;
+  src: local(""),
+    url("../fonts/roboto-v30-latin-ext_latin-700.woff2") format("woff2");
+  font-display: block;
+}
+
 .veloci-dark {
   --font-size-large: 17px;
   --font-size-base: 15px;
@@ -36,7 +44,7 @@
     "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-family-monospace: iosevka, SFMono-Regular, Menlo, Monaco,
     "Ubuntu Mono", Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-family-paragraph: atkinson, -apple-system, BlinkMacSystemFont, iosevka, "Segoe UI",
+  --font-family-paragraph: roboto, -apple-system, BlinkMacSystemFont, iosevka, "Segoe UI",
     "Helvetica Neue", Arial, sans-serif;
 
   --accent-color: #50E451;
@@ -125,6 +133,7 @@ body.veloci-dark {
   background: var(--color-canvas-background);
   font-family: var(--font-family-sans-serif);
   font-size: var(--font-size-base);
+  font-weight: 500;
   letter-spacing: 0.4px;
 }
 
@@ -326,7 +335,7 @@ body.veloci-dark {
   color: var(--color-foreground);
   background: var(--color-canvas-background);
   vertical-align: middle;
-  font-weight: 400;
+  font-weight: 500;
   font-size: var(--font-size-base);
   text-shadow: none;
   box-shadow: none;
@@ -357,7 +366,7 @@ body.veloci-dark {
 .veloci-dark .table-bordered thead th {
   border: 1px solid var(--color-table-heading-background);
   color: var(--color-foreground);
-  font-weight: 400;
+  font-weight: 500;
   vertical-align: middle;
   text-shadow: none;
   box-shadow: none;
@@ -373,6 +382,11 @@ body.veloci-dark {
   border: 1px solid var(--color-btn-border);
 }
 
+/* .veloci-dark .table tr.flow-urgent {
+  font-weight: 500;
+  color: yellow !important;
+} */
+
 .veloci-dark .table-hover tbody tr:hover {
   background: var(--color-table-row-hover);
   color: unset;
@@ -458,7 +472,7 @@ body.veloci-dark {
 
 .veloci-dark .card-body dt,
 .veloci-dark .card-body label {
-  font-weight: 400;
+  font-weight: 500;
   color: var(--color-accent-100);
 }
 
@@ -541,7 +555,7 @@ body.veloci-dark {
   box-shadow: none;
   color: var(--color-foreground);
   text-shadow: none;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 /* Pagination */
@@ -580,17 +594,17 @@ body.veloci-dark {
 .veloci-dark .report-viewer h3 {
   margin-top: 2rem;
   color: #3b84d9;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .veloci-dark .report-viewer h4 {
   color: var(--color-accent-100);
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .veloci-dark .report-viewer h5 {
   color: var(--color-accent-100);
-  font-weight: 400;
+  font-weight: 500;
   font-size: var(--font-size-base);
 }
 

diff --git a/gui/velociraptor/src/themes/veloci-light.css b/gui/velociraptor/src/themes/veloci-light.css
@@ -1,30 +1,38 @@
 @font-face {
-  font-family: "atkinson";
+  font-family: "iosevka";
   font-style: normal;
   font-weight: 400;
   src: local(""),
-    url("../fonts/atkinson-hyperlegible-regular-102a.woff2") format("woff2");
-  size-adjust: 110%;
+    url("../fonts/iosevka-term-extended-subset.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0100-017F;
   font-display: block;
 }
 
 @font-face {
   font-family: "iosevka";
+  font-style: bold;
+  font-weight: 700;
+  src: local(""),
+    url("../fonts/iosevka-term-extendedbold-subset.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0100-017F;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "roboto";
   font-style: normal;
   font-weight: 400;
   src: local(""),
-    url("../fonts/iosevka-term-extended-subset.woff2") format("woff2");
-    unicode-range: U+0000-00FF, U+0100-017F;
+    url("../fonts/roboto-v30-latin-ext_latin-regular.woff2") format("woff2");
   font-display: block;
 }
 
 @font-face {
-  font-family: "iosevka";
+  font-family: "roboto";
   font-style: bold;
   font-weight: 700;
   src: local(""),
-    url("../fonts/iosevka-term-extendedbold-subset.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0100-017F;
+    url("../fonts/roboto-v30-latin-ext_latin-700.woff2") format("woff2");
   font-display: block;
 }
 
@@ -36,7 +44,7 @@
     "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-family-monospace: iosevka, SFMono-Regular, Menlo, Monaco,
     "Ubuntu Mono", Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-family-paragraph: atkinson, -apple-system, BlinkMacSystemFont, iosevka, "Segoe UI",
+  --font-family-paragraph: roboto, -apple-system, BlinkMacSystemFont, iosevka, "Segoe UI",
     "Helvetica Neue", Arial, sans-serif;
 
   --accent-color: #098204;
@@ -117,6 +125,7 @@ body.veloci-light {
   background: var(--color-canvas-background);
   font-family: var(--font-family-sans-serif);
   font-size: var(--font-size-base);
+  font-weight: 400;
   letter-spacing: 0.4px;
 }