chore: added fonts and weights, removed font

+ added new font-weight for Open Sans
+ added "Bitter" font
- bye bye Bree Serif :'(

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -39,6 +39,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
         align-items: center;
         cursor: pointer;
         font-size: 12px;
+        font-weight: 500;
         padding: 0 8px;
         user-select: none;
         justify-content: space-between;

src/components/ui/Checkbox.tsx

@@ -48,7 +48,7 @@ const CheckboxContent = styled.span`
 
 const CheckboxDescription = styled.span`
     font-size: 0.75rem;
-    font-weight: 400;
+    font-weight: 500;
     color: var(--secondary-foreground);
 `;
 

src/components/ui/ComboBox.tsx

@@ -5,7 +5,7 @@ export default styled.select`
     padding: 10px;
     cursor: pointer;
     border-radius: var(--border-radius);
-
+    font-weight: 500;
     font-family: inherit;
     font-size: var(--text-size);
     color: var(--secondary-foreground);

src/components/ui/Tip.tsx

@@ -18,6 +18,7 @@ export const Separator = styled.div<Props>`
 export const TipBase = styled.div<Props>`
     display: flex;
     padding: 12px;
+    font-weight: 500;
     overflow: hidden;
     align-items: center;
 

src/components/ui/fluent/CategoryButton.tsx

@@ -59,11 +59,12 @@ const CategoryBase = styled.div<BaseProps>`
                           font-size: 11px;
                       `}
 
-            font-weight: 400;
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 3;
             overflow: hidden;
+            font-weight: 500;
+            color: var(--secondary-foreground);
 
             a:hover {
                 text-decoration: underline;
@@ -114,7 +115,8 @@ const CategoryBase = styled.div<BaseProps>`
 
                 .description {
                     font-size: 15px;
-
+                    font-weight: 500 !important;
+                    color: var(--foreground);
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;

src/context/Theme.tsx

@@ -49,7 +49,7 @@ export type Fonts =
     | "Roboto"
     | "Noto Sans"
     | "Lato"
-    | "Bree Serif"
+    | "Bitter"
     | "Montserrat"
     | "Poppins"
     | "Raleway"
@@ -94,6 +94,7 @@ export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
         load: async () => {
             await import("@fontsource/open-sans/300.css");
             await import("@fontsource/open-sans/400.css");
+            await import("@fontsource/open-sans/500.css");
             await import("@fontsource/open-sans/600.css");
             await import("@fontsource/open-sans/700.css");
             await import("@fontsource/open-sans/400-italic.css");
@@ -132,9 +133,14 @@ export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
             await import("@fontsource/noto-sans/400-italic.css");
         },
     },
-    "Bree Serif": {
-        name: "Bree Serif",
-        load: () => import("@fontsource/bree-serif/400.css"),
+    Bitter: {
+        name: "Bitter",
+        load: async () => {
+            await import("@fontsource/bitter/300.css");
+            await import("@fontsource/bitter/400.css");
+            await import("@fontsource/bitter/600.css");
+            await import("@fontsource/bitter/700.css");
+        },
     },
     Lato: {
         name: "Lato",

src/pages/settings/Settings.module.scss

@@ -238,7 +238,7 @@
         h5 {
             margin-top: 0;
             font-size: 0.75rem;
-            font-weight: 400;
+            font-weight: 500;
 
             > a:hover {
                 text-decoration: underline;

src/pages/settings/panes/Native.tsx

@@ -162,6 +162,8 @@ export function Native() {
                                         the app will not load!
                                     </span>
                                 </b>
+                                <br />
+                                <code>yarn dev --port 3001</code>
                             </>
                         }>
                         I understand there's no going back.