wip only tailwind styling

src/index.css

@@ -14,6 +14,23 @@
     @apply rounded-full;
 }
 
+* {
+  font-family: 'Lato', sans-serif;
+}
+
 .btn {
-  text-transform: none;
+  @apply capitalize;
+}
+
+input[type='text'],
+input[type='number'] {
+  @apply rounded-full;
+}
+
+iframe {
+  @apply rounded-sm my-4 w-full;
+}
+
+img, video {
+  user-select: none;
 }

src/js/Main.tsx

@@ -30,7 +30,6 @@ import localState from './LocalState';
 
 import '@fontsource/lato/400.css';
 import '@fontsource/lato/700.css';
-import '../css/style.css';
 import '../css/cropper.min.css';
 
 type Props = Record<string, unknown>;
@@ -117,29 +116,8 @@ class Main extends Component<Props, ReactState> {
     };
 
     return (
-      <div id="main-content">
-        {isDesktopNonMac ? (
-          <div className="windows-titlebar">
-            <span>iris</span>
-            <div className="title-bar-btns">
-              <button className="min-btn" onClick={() => this.electronCmd('minimize')}>
-                -
-              </button>
-              <button className="max-btn" onClick={() => this.electronCmd('maximize')}>
-                +
-              </button>
-              <button className="close-btn" onClick={() => this.electronCmd('close')}>
-                x
-              </button>
-            </div>
-          </div>
-        ) : null}
-        <section
-          className={`main ${isDesktopNonMac ? 'desktop-non-mac' : ''} ${
-            s.showMenu ? 'menu-visible-xs' : ''
-          }`}
-          style="flex-direction: row;"
-        >
+      <div className="flex justify-center">
+        <section className="flex w-full max-w-screen-xl justify-between relative">
           {s.loggedIn ? <Menu /> : null}
           <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle}>
             <title>{title}</title>
@@ -152,7 +130,7 @@ class Main extends Component<Props, ReactState> {
             <meta name="twitter:image" content="https://iris.to/assets/img/irisconnects.png" />
           </Helmet>
           <div className="overlay" onClick={() => this.onClickOverlay()}></div>
-          <div className="view-area">
+          <div className="pb-16 md:pb-0 relative flex h-full w-full flex-col md:w-full">
             <Router onChange={(e) => this.handleRoute(e)}>
               <FeedList path="/" />
               <KeyConverter path="/key" />
@@ -181,9 +159,10 @@ class Main extends Component<Props, ReactState> {
               <NoteOrProfile path="/:id" />
             </Router>
           </div>
+          <MediaPlayer />
+          <Footer />
         </section>
-        <MediaPlayer />
-        <Footer />
+
         {this.state.showLoginModal && (
           <Modal
             centerVertically={true}

src/js/components/Footer.tsx

@@ -62,7 +62,7 @@ class Footer extends Component<Props, State> {
     }
 
     return (
-      <footer class="visible-xs-flex nav footer">
+      <footer className="fixed md:hidden bottom-0 z-10 w-full bg-base-200 pb-safe-area-inset-bottom">
         <div class="header-content" onClick={() => localState.get('scrollUp').put(true)}>
           <a
             href="/"

src/js/components/Header.tsx

@@ -3,9 +3,7 @@ import { HeartIcon as HeartIconFull } from '@heroicons/react/24/solid';
 import { route } from 'preact-router';
 import { Link } from 'preact-router/match';
 
-import logo from '../../../public/img/icon128.png';
 import Component from '../BaseComponent';
-import Helpers from '../Helpers';
 import Icons from '../Icons';
 import localState from '../LocalState';
 import Key from '../nostr/Key';
@@ -102,34 +100,6 @@ export default class Header extends Component {
     this.setState({ connectedRelays: Relays.getConnectedRelayCount() });
   }
 
-  renderBackButton() {
-    const { activeRoute } = this.state;
-    const chatting = activeRoute && activeRoute.indexOf('/chat/') === 0;
-    return chatting ? (
-      <div
-        id="back-button"
-        class="visible-xs-inline-block"
-        onClick={() => this.backButtonClicked()}
-      >
-        {Icons.backArrow}
-      </div>
-    ) : (
-      ''
-    );
-  }
-
-  renderMenuIcon() {
-    const { activeRoute } = this.state;
-    const chatting = activeRoute && activeRoute.indexOf('/chat/') === 0;
-    return !Helpers.isElectron && !chatting ? (
-      <a href="/" onClick={(e) => this.onLogoClick(e)} class="visible-xs-flex logo">
-        <div class="mobile-menu-icon">{Icons.menu}</div>
-      </a>
-    ) : (
-      ''
-    );
-  }
-
   renderSearchBox() {
     return !this.chatId ? <SearchBox onSelect={(item) => route(`/${item.key}`)} /> : '';
   }
@@ -173,41 +143,10 @@ export default class Header extends Component {
             {this.renderSearchBox()}
           </div>
         )}
-        {!!Key.getPubKey() && this.renderMobileSearchButton(chatting)}
       </div>
     );
   }
 
-  renderMobileSearchButton(chatting) {
-    return !chatting ? (
-      <div
-        id="mobile-search-btn"
-        class={`mobile-search-hidden ${
-          this.state.showMobileSearch ? 'hidden' : 'visible-xs-inline-block'
-        }`}
-        onClick={() => {
-          // also synchronously make element visible so it can be focused
-          document.querySelector('.mobile-search-visible')?.classList.remove('hidden-xs', 'hidden');
-          document
-            .querySelector('.mobile-search-hidden')
-            ?.classList.remove('visible-xs-inline-block');
-          document.querySelector('.mobile-search-hidden')?.classList.add('hidden');
-          const input = document.querySelector('.search-box input');
-          if (input) {
-            setTimeout(() => {
-              (input as HTMLInputElement).focus();
-            }, 0);
-          }
-          this.setState({ showMobileSearch: true });
-        }}
-      >
-        {Icons.search}
-      </div>
-    ) : (
-      ''
-    );
-  }
-
   renderMyProfile() {
     const key = Key.getPubKey();
     const npub = Key.toNostrBech32Address(key, 'npub');
@@ -247,15 +186,6 @@ export default class Header extends Component {
     );
   }
 
-  renderLogo() {
-    return (
-      <a tabIndex={3} href="/" className="logo" style="margin-left: 15px;">
-        <img src={logo} width="30" height="30" style="margin-right: 9px;" />
-        <span style="font-size: 1.8em; color: var(--text-color);">iris</span>
-      </a>
-    );
-  }
-
   renderLoginBtns() {
     return (
       <div class="login-buttons">
@@ -272,28 +202,15 @@ export default class Header extends Component {
   render() {
     const loggedIn = !!Key.getPubKey();
     return (
-      <div className="nav header">
-        {!loggedIn && this.renderLogo()}
-        {this.renderBackButton()}
-        <div className="header-content">
-          <div className={`mobile-search-hidden ${this.state.showMobileSearch ? 'hidden-xs' : ''}`}>
-            {loggedIn && this.renderMenuIcon()}
+      <div className="sticky top-0 z-10 w-full cursor-pointer">
+        <div className="w-full bg-black md:bg-opacity-50 md:shadow-lg md:backdrop-blur-lg">
+          <div className="flex w-full items-center justify-between">
+            {loggedIn && this.state.showConnectedRelays && this.renderConnectedRelays()}
+            {this.renderHeaderText()}
+            {loggedIn && this.renderNotifications()}
+            {loggedIn && this.renderMyProfile()}
+            {!loggedIn && this.renderLoginBtns()}
           </div>
-          <a
-            className={`mobile-search-visible ${this.state.showMobileSearch ? '' : 'hidden-xs'}`}
-            href=""
-            onClick={(e) => {
-              e.preventDefault();
-              this.setState({ showMobileSearch: false });
-            }}
-          >
-            <span class="visible-xs-inline-block">{Icons.backArrow}</span>
-          </a>
-          {loggedIn && this.state.showConnectedRelays && this.renderConnectedRelays()}
-          {this.renderHeaderText()}
-          {loggedIn && this.renderNotifications()}
-          {loggedIn && this.renderMyProfile()}
-          {!loggedIn && this.renderLoginBtns()}
         </div>
       </div>
     );

src/js/components/Identicon.tsx

@@ -105,9 +105,9 @@ class MyIdenticon extends Component<Props, State> {
         width={width}
         onClick={this.props.onClick}
         style={{ cursor: this.props.onClick ? 'pointer' : undefined }}
-        className={`identicon-container ${hasPictureStyle} ${showTooltip} ${activity}`}
+        className={`${hasPictureStyle} ${showTooltip} ${activity}`}
       >
-        <div class="identicon">
+        <div>
           {hasPicture ? (
             <SafeImg
               src={this.state.picture as string}

src/js/components/Menu.tsx

@@ -106,15 +106,15 @@ export default class Menu extends BaseComponent {
 
   render() {
     return (
-      <div class="application-list">
+      <div className="sticky top-0 z-20 h-screen max-h-screen hidden md:w-16 lg:w-64 flex-col px-2 py-4 md:flex">
         <a
+          className="flex items-center gap-3 px-2 mb-4"
           tabIndex={3}
           href="/"
           onClick={(e) => this.menuLinkClicked(e, undefined, true)}
-          class="logo"
         >
           <img src={logo} width="30" height="30" />
-          <span style="font-size: 1.8em">iris</span>
+          <h1 className="hidden lg:flex text-3xl">iris</h1>
         </a>
         {APPLICATIONS.map((a: any) => {
           if (a.url && (!a.beta || this.state.showBetaFeatures)) {
@@ -126,7 +126,7 @@ export default class Menu extends BaseComponent {
             return (
               <a
                 onClick={(e) => this.menuLinkClicked(e, a)}
-                className={`${isActive ? 'active' : ''} btn`}
+                className={`${isActive ? 'active' : ''} inline-flex w-auto flex items-center space-x-4 p-3 rounded-full transition-colors duration-200 hover:bg-neutral-900`}
                 href={a.url}
               >
                 {a.text === 'messages' && this.state.unseenMsgsTotal ? (
@@ -135,12 +135,12 @@ export default class Menu extends BaseComponent {
                   ''
                 )}
                 <Icon width={24} />
-                {t(a.text)}
+                <span className="hidden lg:flex">{t(a.text)}</span>
               </a>
             );
           }
         })}
-        <div class="menu-new-post">
+        <div class="py-2">
           <button
             className="btn btn-primary btn-circle"
             onClick={() => this.setState({ showNewPostModal: !this.state.showNewPostModal })}