feat(settings): UI improvements (#448)

* Fixed CSS for Settings.tsx + new Theme Shop design

* reformat

* More changes to UI CSS

* Small CSS fixes for Settings.tsx, Account, Bots

* Updated theme shop, settings pages, cleanup

* chore: force sync language submodule

* fix(sidebar): prevent items from shrinking

* fix(push): fix timestamp and icon for push notifications

* fix(voice): hide grant permission button after grant

* chore: hide new shop / chevron before merge

* chore(ci): bump node to v16 in dockerfile

* fix(sidebar): change width of channel sidebar

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>

src/components/navigation/SidebarBase.tsx

@@ -14,7 +14,7 @@ export const GenericSidebarBase = styled.div<{
     mobilePadding?: boolean;
 }>`
     height: 100%;
-    width: 240px;
+    width: 236px;
     display: flex;
     flex-shrink: 0;
     flex-direction: column;

src/components/navigation/left/ServerListSidebar.tsx

@@ -79,7 +79,9 @@ const ServersBase = styled.div`
     width: 56px;
     height: 100%;
     padding-left: 2px;
+
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
 
     ${isTouchscreenDevice &&

src/components/navigation/left/ServerSidebar.tsx

@@ -32,7 +32,7 @@ interface Props {
 
 const ServerBase = styled.div`
     height: 100%;
-    width: 240px;
+    width: 236px;
     display: flex;
     flex-shrink: 0;
     flex-direction: column;

src/components/ui/Button.tsx

@@ -24,6 +24,7 @@ export default styled.button<Props>`
     font-size: 0.875rem;
     font-family: inherit;
     font-weight: 500;
+    flex-shrink: 0;
 
     transition: 0.2s ease opacity;
     transition: 0.2s ease background-color;

src/components/ui/Header.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 
 export default styled.div<Props>`
-    gap: 6px;
+    gap: 10px;
     height: 48px;
     flex: 0 auto;
     display: flex;

src/components/ui/Tip.tsx

@@ -49,9 +49,9 @@ export const TipBase = styled.div<Props>`
     ${(props) =>
         props.error &&
         css`
-            color: var(--error);
+            color: white;
             border: 2px solid var(--error);
-            background: var(--secondary-header);
+            background: var(--error);
         `}
 `;