Merge pull request 'tailwind' (#651) from mmalmi/snort:main into main

2023-10-15 18:28:07 +02:00 · 2023-10-15 18:28:07 +02:00 · a168465bdb
commit a168465bdb
parent 28fa0b4bc8
13 changed files with 1305 additions and 40 deletions
--- a/packages/app/package.json
+++ b/packages/app/package.json
@ -93,6 +93,7 @@
    "@webbtc/webln-types": "^1.0.10",
    "@webpack-cli/generators": "^3.0.4",
    "@webscopeio/react-textarea-autocomplete": "^4.9.2",
+    "autoprefixer": "^10.4.16",
    "babel-loader": "^9.1.3",
    "config": "^3.3.9",
    "copy-webpack-plugin": "^11.0.0",
@ -104,9 +105,13 @@
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.4.31",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.2.0",
    "prettier": "2.8.3",
    "prop-types": "^15.8.1",
    "source-map-loader": "^4.0.1",
+    "tailwindcss": "^3.3.3",
    "terser-webpack-plugin": "^5.3.9",
    "tinybench": "^2.5.1",
    "ts-jest": "^29.1.1",
--- a/packages/app/postcss.config.js
+++ b/packages/app/postcss.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer")],
+};
--- a/packages/app/src/Element/Event/Note.css
+++ b/packages/app/src/Element/Event/Note.css
@ -136,15 +136,6 @@
  gap: 5px;
 }

-.reaction-pill.reacted {
-  color: var(--highlight);
-}
-
-.reaction-pill:hover {
-  cursor: pointer;
-  color: var(--highlight);
-}
-
 .trash-icon {
  color: var(--error);
  margin-right: auto;
--- a/packages/app/src/Element/Event/NoteFooter.tsx
+++ b/packages/app/src/Element/Event/NoteFooter.tsx
@ -196,7 +196,7 @@ export default function NoteFooter(props: NoteFooterProps) {
    if (targets) {
      return (
        <AsyncFooterIcon
-          className={didZap ? "reacted" : ""}
+          className={didZap ? "text-nostr-orange" : "hover:text-nostr-orange"}
          {...longPress()}
          title={formatMessage({ defaultMessage: "Zap" })}
          iconName={canFastZap ? "zapFast" : "zap"}
@ -214,7 +214,7 @@ export default function NoteFooter(props: NoteFooterProps) {
      <Menu
        menuButton={
          <AsyncFooterIcon
-            className={hasReposted() ? "reacted" : ""}
+            className={hasReposted() ? "text-nostr-blue" : "hover:text-nostr-blue"}
            iconName="repeat"
            title={formatMessage({ defaultMessage: "Repost" })}
            value={reposts.length}
@ -255,7 +255,7 @@ export default function NoteFooter(props: NoteFooterProps) {
    const reacted = hasReacted("+");
    return (
      <AsyncFooterIcon
-        className={reacted ? "reacted" : ""}
+        className={reacted ? "text-nostr-red" : "hover:text-nostr-red"}
        iconName={reacted ? "heart-solid" : "heart"}
        title={formatMessage({ defaultMessage: "Like" })}
        value={positive.length}
@ -271,7 +271,7 @@ export default function NoteFooter(props: NoteFooterProps) {
    if (readonly) return;
    return (
      <AsyncFooterIcon
-        className={note.show ? "reacted" : ""}
+        className={note.show ? "text-nostr-purple" : "hover:text-nostr-purple"}
        iconName="reply"
        title={formatMessage({ defaultMessage: "Reply" })}
        value={props.replies ?? 0}
@ -319,7 +319,7 @@ function AsyncFooterIcon(props: AsyncFooterIconProps) {
  const mergedProps = {
    ...props,
    iconSize: 18,
-    className: `reaction-pill${props.className ? ` ${props.className}` : ""}`,
+    className: `transition duration-200 ease-in-out reaction-pill${props.className ? ` ${props.className}` : ""}`,
  };
  return (
    <AsyncIcon {...mergedProps}>
--- a/packages/app/src/Element/Relay/Relay.css
+++ b/packages/app/src/Element/Relay/Relay.css
@ -28,6 +28,7 @@
  background-color: var(--gray);
  user-select: none;
  color: var(--font-color);
+  display: inline-block;
 }

 .icon-btn:hover {
@ -39,4 +40,5 @@
  padding: 2px 10px;
  background-color: var(--gray);
  border-radius: 10px;
+  display: inline-block;
 }
--- a/packages/app/src/Element/User/FollowsYou.css
+++ b/packages/app/src/Element/User/FollowsYou.css
@ -6,4 +6,5 @@
  padding: 4px 6px;
  background: var(--bg-secondary);
  border-radius: 6px;
+  line-height: 1;
 }
--- a/packages/app/src/Pages/settings/Profile.tsx
+++ b/packages/app/src/Pages/settings/Profile.tsx
@ -107,8 +107,8 @@ export default function ProfileSettings(props: ProfileSettingsProps) {

  function editor() {
    return (
-      <div className="flex f-col g24">
-        <div className="flex f-col w-max g8">
+      <div className="flex-column g24">
+        <div className="flex-column w-max g8">
          <h4>
            <FormattedMessage defaultMessage="Name" />
          </h4>
@ -120,7 +120,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
            disabled={readonly}
          />
        </div>
-        <div className="flex f-col w-max g8">
+        <div className="flex-column w-max g8">
          <h4>
            <FormattedMessage defaultMessage="About" />
          </h4>
@ -130,7 +130,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
            value={about}
            disabled={readonly}></textarea>
        </div>
-        <div className="flex f-col w-max g8">
+        <div className="flex-column w-max g8">
          <h4>
            <FormattedMessage defaultMessage="Website" />
          </h4>
@ -142,11 +142,11 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
            disabled={readonly}
          />
        </div>
-        <div className="flex f-col w-max g8">
+        <div className="flex-column w-max g8">
          <h4>
            <FormattedMessage defaultMessage="Nostr Address" />
          </h4>
-          <div className="flex f-col g8 w-max">
+          <div className="flex-column g8 w-max">
            <input
              type="text"
              className="w-max"
@ -167,7 +167,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
            </div>
          </div>
        </div>
-        <div className="flex f-col w-max g8">
+        <div className="flex-column w-max g8">
          <h4>
            <FormattedMessage defaultMessage="Lightning Address" />
          </h4>
@ -190,7 +190,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
    if (!id) return null;
    return (
      <>
-        <div className="flex f-center image-settings">
+        <div className="flex justify-center items-center image-settings">
          {(props.banner ?? true) && (
            <div
              style={{
--- a/packages/app/src/Pages/settings/Relays.tsx
+++ b/packages/app/src/Pages/settings/Relays.tsx
@ -55,7 +55,7 @@ const RelaySettingsPage = () => {
        <div className="flex mb10">
          <input
            type="text"
-            className="f-grow"
+            className="grow"
            placeholder="wss://my-relay.com"
            value={newRelay}
            onChange={handleNewRelayChange}
@ -84,13 +84,13 @@ const RelaySettingsPage = () => {
      <h3>
        <FormattedMessage {...messages.Relays} />
      </h3>
-      <div className="flex f-col mb10">
+      <div className="flex flex-col mb10">
        {Object.keys(relays.item || {}).map(a => (
          <Relay addr={a} key={a} />
        ))}
      </div>
      <div className="flex mt10">
-        <div className="f-grow"></div>
+        <div className="grow"></div>
        <AsyncButton type="button" onClick={() => saveRelays()} disabled={login.readonly}>
          <FormattedMessage {...messages.Save} />
        </AsyncButton>
@ -99,7 +99,7 @@ const RelaySettingsPage = () => {
      <h3>
        <FormattedMessage defaultMessage="Other Connections" />
      </h3>
-      <div className="flex f-col mb10">
+      <div className="flex flex-col mb10">
        {otherConnections.map(a => (
          <Relay addr={a.address} key={a.id} />
        ))}
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
  --bg-color: #000;
  --font-color: #fff;
@ -229,7 +233,10 @@ small {
  line-height: 22px; /* 157.143% */
 }

-button {
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
  position: relative;
  cursor: pointer;
  padding: 10px 16px;
@ -242,6 +249,12 @@ button {
  outline: none;
 }

+.btn,
+input,
+select {
+  @apply rounded-full;
+}
+
 button.primary {
  background: rgb(239, 150, 68);
  background: var(--primary-gradient);
@ -390,6 +403,42 @@ textarea {
  font: inherit;
 }

+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 32px;
+  line-height: 42px;
+}
+
+h2 {
+  font-size: 26px;
+  line-height: 36px;
+}
+
+h3 {
+  font-size: 20px;
+  line-height: 30px;
+}
+
+h4 {
+  font-size: 18px;
+  line-height: 28px;
+}
+
 input[type="text"],
 input[type="password"],
 input[type="number"],
@ -758,6 +807,16 @@ div.form-col {
  line-height: 36px;
 }

+.main-content .profile-preview {
+  margin: 8px 0;
+}
+
+.main-content h2 {
+  font-weight: 600;
+  font-size: 26px;
+  line-height: 36px;
+}
+
 button.tall {
  height: 40px;
 }
@ -914,6 +973,17 @@ svg.zap-solid {
  border: 1px solid var(--border-color);
 }

+.light .spinner-button {
+  background: #fff;
+  border: 1px solid var(--border-color);
+  color: var(--font-secondary);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 1px 1px;
+}
+
+.light .spinner-button:hover {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
+}
+
 .main-content.p {
  border-bottom: 0;
  border-top: 0;
--- a/packages/app/src/index.tsx
+++ b/packages/app/src/index.tsx
@ -95,16 +95,16 @@ const System = new NostrSystem({
 });

 async function fetchProfile(key: string) {
-  const rsp = await fetch(`${CONFIG.httpCache}/profile/${key}`);
-  if (rsp.ok) {
-    try {
+  try {
+    const rsp = await fetch(`${CONFIG.httpCache}/profile/${key}`);
+    if (rsp.ok) {
      const data = (await rsp.json()) as NostrEvent;
      if (data) {
        return mapEventToProfile(data);
      }
-    } catch (e) {
-      console.error(e);
    }
+  } catch (e) {
+    console.error(e);
  }
 }

--- a/packages/app/tailwind.config.js
+++ b/packages/app/tailwind.config.js
@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "media",
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        "neutral-999": "#090909",
+      },
+      textColor: {
+        "nostr-blue": "var(--repost)",
+        "nostr-green": "var(--success)",
+        "nostr-orange": "var(--zap)",
+        "nostr-red": "var(--heart)",
+        "nostr-purple": "var(--highlight)",
+      },
+      spacing: {
+        px: "1px",
+      },
+    },
+  },
+  plugins: [],
+};
--- a/packages/app/webpack.config.js
+++ b/packages/app/webpack.config.js
@ -140,7 +140,18 @@ const config = {
      },
      {
        test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, require.resolve("css-loader")],
+        use: [
+          MiniCssExtractPlugin.loader,
+          require.resolve("css-loader"),
+          {
+            loader: require.resolve("postcss-loader"),
+            options: {
+              postcssOptions: {
+                plugins: [require("tailwindcss"), require("autoprefixer")],
+              },
+            },
+          },
+        ],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|webp|wasm)$/i,
--- a/yarn.lock
+++ b/yarn.lock