more tailwind styling

src/css/style.css

@@ -28,7 +28,6 @@
   --menu-bg: #000000;
   --msg-border: none;
   --msg-form-button-color: #ffffff;
-  --nav-border-bottom: 1px solid #222526;
   --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8);
   --non-string-value-color: #9e64fe;
   --notify: #5e02f6;
@@ -41,7 +40,6 @@
   --red: #f81780;
   --seen-indicator: rgba(255, 255, 255, 0.45);
   --sidebar-bg: #000000;
-  --sidebar-border-right: 1px solid #292b31;
   --sidebar-color: #8d9197;
   --muted-text-color: #8d9197;
   --text-color: #ffffff;
@@ -75,7 +73,6 @@
   --menu-bg: #ffffff;
   --msg-border: none;
   --msg-form-button-color: #000000;
-  --nav-border-bottom: 1px solid #e5e5e5;
   --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8);
   --non-string-value-color: #9e64fe;
   --notify: #c8b1f0;
@@ -86,7 +83,6 @@
   --red: #f81780;
   --seen-indicator: rgba(0, 0, 0, 0.45);
   --sidebar-bg: #ffffff;
-  --sidebar-border-right: 1px solid #e5e5e5;
   --sidebar-color: #8d9197;
   --muted-text-color: #8d9197;
   --text-color: #000000;
@@ -587,7 +583,6 @@ a.logo img:not(:last-child) {
   flex-direction: column;
   flex: 1 0 10em;
   background: var(--sidebar-bg);
-  border-right: var(--sidebar-border-right);
 }
 
 .sidebar * {
@@ -615,7 +610,6 @@ a.logo img:not(:last-child) {
   flex: 1;
   background-color: var(--header-color);
   max-height: 60px;
-  border-bottom: var(--nav-border-bottom);
   box-shadow: var(--nav-shadow);
 }
 
@@ -938,7 +932,6 @@ header.footer .header-content {
   width: 190px;
   overflow-x: hidden;
   overflow-y: auto;
-  border-left: var(--sidebar-border-right);
   background: var(--sidebar-bg);
   transition: all 0.25s ease;
   padding-top: 15px;
@@ -1015,7 +1008,6 @@ header.footer .header-content {
   width: 220px;
   transition: all 0.25s ease;
   background: var(--menu-bg);
-  border-right: var(--sidebar-border-right);
   color: var(--sidebar-color);
 }
 
@@ -1219,7 +1211,6 @@ a.logo:active {
   min-width: 220px;
 
   transition: all 0.25s ease;
-  border-right: var(--sidebar-border-right);
   color: var(--text-color);
 }
 
@@ -1266,20 +1257,12 @@ a.msg {
   max-width: 100%;
   max-height: none;
   object-fit: contain;
-  border-radius: 15px;
+  border-radius: 5px;
   border: 1px solid var(--main-color);
   overflow: hidden;
   cursor: pointer;
 }
 
-.public-messages-view .img-container {
-  margin-bottom: 10px;
-  margin-top: 15px;
-  height: 400px;
-  width: 100%;
-  text-align: center;
-}
-
 .public-messages-view .msg {
   align-items: flex-start;
   display: flex;
@@ -1320,12 +1303,6 @@ a.msg {
   user-select: none;
 }
 
-.public-messages-view .img-container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
 .public-messages-view .msg .text,
 .public-messages-view .msg-sender {
   overflow-wrap: anywhere;
@@ -1368,10 +1345,6 @@ a.msg {
   border-radius: 8px 8px 8px 8px;
 }
 
-.img-container {
-  position: relative;
-}
-
 .dropbtn {
   font-size: 24px;
   cursor: pointer;

src/js/Helpers.tsx

@@ -506,7 +506,7 @@ export default {
       const imgRegex = /(https?:\/\/[^\s]*\.(?:jpg|jpeg|gif|png|webp))/gi;
       replacedText = reactStringReplace(replacedText, imgRegex, (match, i) => {
         return (
-          <div className="img-container">
+          <div className="img-container my-2">
             <SafeImg onClick={opts.onImageClick} width={569} src={match} key={match + i} />
           </div>
         );

src/js/components/buttons/Copy.tsx

@@ -54,9 +54,9 @@ const Copy = ({ copyStr, text }: Props) => {
 
   const buttonText = copied ? t('copied') : text || t('copy');
   return (
-    <Button className="copy-button" onClick={(e) => onClick(e)}>
+    <button className="btn btn-primary" onClick={(e) => onClick(e)}>
       {buttonText}
-    </Button>
+    </button>
   );
 };
 

src/js/components/feed/FeedTypeSelector.tsx

@@ -1,4 +1,5 @@
-import Icons from '../../Icons';
+import { Bars3Icon, Squares2X2Icon } from '@heroicons/react/24/outline';
+
 import localState from '../../LocalState';
 
 export default function FeedTypeSelector({ setDisplay, display, index }) {
@@ -14,7 +15,7 @@ export default function FeedTypeSelector({ setDisplay, display, index }) {
           isProfile ? 'isProfile_left' : ''
         } rounded-sm flex justify-center flex-1 p-3`}
       >
-        {Icons.post}
+        <Bars3Icon width={24} height={24} />
       </button>
       <button
         onClick={() => {
@@ -25,7 +26,7 @@ export default function FeedTypeSelector({ setDisplay, display, index }) {
           isProfile ? 'isProfile_right' : ''
         } rounded-sm flex justify-center flex-1 p-3`}
       >
-        {Icons.grid}
+        <Squares2X2Icon width={24} height={24} />
       </button>
     </div>
   );

src/js/views/settings/Account.tsx

@@ -57,18 +57,19 @@ export default class Account extends Component {
     const hasPriv = !!Key.getPrivKey();
     return (
       <>
-        <div class="centered-container">
+        <div class="centered-container prose">
           <h2>{t('account')}</h2>
+          {hasPriv ? (
+            <p>
+              <b>{t('save_backup_of_privkey_first')}</b> {t('otherwise_cant_log_in_again')}
+            </p>
+          ) : null}
           <p>
-            {hasPriv ? (
-              <>
-                <b>{t('save_backup_of_privkey_first')}</b> {t('otherwise_cant_log_in_again')}
-              </>
-            ) : null}
-          </p>
-          <p>
-            <Button onClick={() => this.onLogoutClick(hasPriv)}>{t('log_out')}</Button>
-            <Button
+            <button className="btn btn-primary" onClick={() => this.onLogoutClick(hasPriv)}>
+              {t('log_out')}
+            </button>
+            <button
+              className="btn btn-primary"
               onClick={() =>
                 this.setState({
                   showSwitchAccount: !this.state.showSwitchAccount,
@@ -76,7 +77,7 @@ export default class Account extends Component {
               }
             >
               {t('switch_account')}
-            </Button>
+            </button>
           </p>
           {this.state.showSwitchAccount
             ? html`