feat: styled settings background and password box

stylesheets/_session.scss

@@ -582,6 +582,7 @@ label {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: var(--background-secondary-color);
 
   &__password-lock {
     display: flex;
@@ -598,21 +599,22 @@ label {
       max-width: 90%;
       width: 600px;
 
-      background: var(--color-cell-background);
-      color: var(--color-text);
+      background: var(--background-primary-color);
+      color: var(--text-primary-color);
 
-      border: 1px solid var(--color-darker-gray-color);
+      border: 1px solid var(--border-color);
       border-radius: 5px;
     }
   }
 }
 
+// TODO Theming
 #qr svg,
 .qr-image svg {
   width: $session-modal-size-sm;
   height: $session-modal-size-sm;
   padding: var(--margins-xs);
-  background-color: var(--color-white-color);
+  background-color: var(--white-color);
   border-radius: 3px;
 }
 

ts/components/settings/SessionSettings.tsx

@@ -84,18 +84,22 @@ const SessionInfo = () => {
 
 const StyledPasswordInput = styled.input`
   width: 100%;
-  background: var(--color-input-background);
-  color: var(--color-text);
+  background: var(--text-box-background-color);
+  color: var(--text-box-text-user-color);
 
   padding: var(--margins-xs) var(--margins-md);
   margin-bottom: var(--margins-lg);
   outline: none;
-  border: none;
-  border-radius: 2px;
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
   text-align: center;
   font-size: 24px;
   letter-spacing: 5px;
   font-family: var(--font-default);
+
+  ::placeholder {
+    color: var(--text-box-text-control-color);
+  }
 `;
 
 const StyledH3 = styled.h3`

ts/components/settings/SessionSettingsHeader.tsx

@@ -11,7 +11,7 @@ const StyledSettingsHeader = styled.div`
   justify-content: center;
   align-items: center;
   height: var(--main-view-header-height);
-  background: var(--color-cell-background);
+  border-bottom: 1px solid var(--border-color);
 `;
 
 const StyledHeaderTittle = styled.div`

ts/themes/SessionTheme.tsx

@@ -485,6 +485,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* TODO Theming Clarify what those transparent colors mean */
 
     /* Text Box */
+    /* Also used for inputs specifically password box input */
     --text-box-background-color: var(--background-primary-color);
     --text-box-text-control-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
     --text-box-text-user-color: var(--text-primary-color);