feat: theme editprofile, onion status and seed modals

styled qr code and cleanup

stylesheets/_index.scss

@@ -10,10 +10,7 @@
 }
 
 .edit-profile-dialog,
-.create-group-dialog,
-.user-details-dialog,
-.update-group-dialog,
-.onion-status-dialog {
+.update-group-dialog {
   .content {
     max-width: 100% !important;
   }
@@ -32,13 +29,6 @@
     text-align: center;
   }
 
-  .message {
-    font-style: italic;
-    color: var(--color-gray-color);
-    font-size: 12px;
-    margin-bottom: 16px;
-  }
-
   .module-avatar {
     display: block;
     margin-bottom: 1em;

stylesheets/_modal.scss

@@ -37,7 +37,6 @@
   }
 }
 
-.create-group-dialog,
 .add-moderators-dialog,
 .remove-moderators-dialog,
 .invite-friends-dialog {
@@ -70,7 +69,6 @@
   }
 }
 
-.create-group-dialog,
 .add-moderators-dialog,
 .remove-moderators-dialog,
 .edit-profile-dialog {
@@ -168,11 +166,6 @@
   .avatar-center-inner {
     position: relative;
 
-    .module-avatar {
-      // TODO Theming update
-      box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow);
-    }
-
     .qr-view-button {
       cursor: pointer;
       display: flex;
@@ -215,10 +208,6 @@
       border-radius: 5px;
       text-align: center;
       font-size: $session-font-md;
-      // TODO Theming - Is this redundant?
-      background-color: var(--input-background-color);
-      color: var(--input-text-color);
-      border: 1px solid var(--input-border-color);
     }
 
     &-uneditable {
@@ -238,67 +227,6 @@
   }
 }
 
-.onion-status-dialog {
-  .session-modal__header__title {
-    font-size: var(--font-size-lg);
-  }
-
-  .session-modal {
-    width: $session-modal-size-md;
-
-    &__header {
-      height: 68.45px;
-    }
-  }
-
-  .session-modal__body {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    line-height: 1.5em;
-
-    .onionDescriptionContainer {
-      text-align: center;
-      margin-top: 0;
-    }
-
-    .onionPath {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      margin: 2em auto;
-
-      .dotContainer:not(:last-child) {
-        padding-bottom: 2em;
-      }
-
-      .dotContainer {
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        p {
-          margin-bottom: 0 !important;
-          margin-top: 0;
-          margin-left: 2em;
-          text-align: left;
-        }
-
-        .dot {
-          height: 15px;
-          width: 15px;
-          border-radius: 50%;
-          display: inline-block;
-        }
-      }
-    }
-
-    .lineContainer {
-      height: 50px;
-    }
-  }
-}
-
 .reaction-list-modal {
   .session-confirm-wrapper {
     .session-modal__body {

stylesheets/_session.scss

@@ -23,7 +23,7 @@
 
 input,
 textarea {
-  caret-color: var(--color-text) !important;
+  caret-color: var(--input-text-color) !important;
 }
 
 * {
@@ -433,12 +433,13 @@ label {
   width: 80px;
   height: 80px;
   border-radius: 100%;
-  background-color: rgba(var(--color-black-color-rgb), 0.72);
+  background-color: var(--lightbox-background-color);
   opacity: 0;
   transition: var(--default-duration);
 
   &:after {
     content: 'Edit';
+    color: var(--white-color);
   }
 
   &:hover {
@@ -561,7 +562,6 @@ label {
   }
 }
 
-// TODO Theming
 #qr svg,
 .qr-image svg {
   width: $session-modal-size-sm;
@@ -577,6 +577,8 @@ label {
 
 .session-id-editable {
   padding: var(--margins-lg);
+  background: var(--input-background-color);
+  color: var(--input-text-color);
 
   textarea {
     width: 30vh;
@@ -596,6 +598,7 @@ label {
     padding-left: 5px;
     padding-right: 5px;
     font-family: var(--font-default);
+    color: var(--input-text-placeholder-color);
   }
 
   &.group-id-editable-textarea {

ts/components/dialog/EditProfileDialog.tsx

@@ -34,7 +34,12 @@ interface State {
 const QRView = ({ sessionID }: { sessionID: string }) => {
   return (
     <div className="qr-image">
-      <QRCode value={sessionID} bgColor="#FFFFFF" fgColor="#1B1B1B" level="L" />
+      <QRCode
+        value={sessionID}
+        bgColor="var(--white-color)"
+        fgColor="var(--black-color)"
+        level="L"
+      />
     </div>
   );
 };
@@ -153,7 +158,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
               }}
               role="button"
             >
-              <SessionIconButton iconType="qr" iconSize="small" iconColor={'rgb(0, 0, 0)'} />
+              <SessionIconButton iconType="qr" iconSize="small" iconColor="var(--black-color)" />
             </div>
           </div>
         </div>

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -48,7 +48,7 @@ const StyledOnionDescription = styled.p`
 `;
 
 const StyledVerticalLine = styled.div`
-  background: rgba(#7a7a7a, 0.6);
+  background: var(--border-color);
   position: absolute;
   height: calc(100% - 2 * 15px);
   margin: 15px calc(100% / 2 - 1px);

ts/components/dialog/SessionSeedModal.tsx

@@ -96,8 +96,8 @@ interface SeedProps {
 const Seed = (props: SeedProps) => {
   const { recoveryPhrase, onClickCopy } = props;
   const i18n = window.i18n;
-  const bgColor = '#FFFFFF';
-  const fgColor = '#1B1B1B';
+  const bgColor = 'var(--white-color)';
+  const fgColor = 'var(--black-color)';
   const dispatch = useDispatch();
 
   const hexEncodedSeed = mn_decode(recoveryPhrase, 'english');