fix fonts & some styles

PotLock · Oct 27, 2023 · f314fb6 · f314fb6
1 parent 422ab4c
commit f314fb6
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 28 deletions.
diff --git a/apps/potlock/widget/Buttons/ActionButton.jsx b/apps/potlock/widget/Buttons/ActionButton.jsx
@@ -29,7 +29,7 @@ const Button = styled.button`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 8px 24px 12px 24px;
+  padding: 8px 24px;
   background: ${getButtonBackground()};
   overflow: hidden;
   box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;

diff --git a/apps/potlock/widget/Buttons/NavigationButton.jsx b/apps/potlock/widget/Buttons/NavigationButton.jsx
@@ -26,7 +26,7 @@ const Button = styled.a`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 8px 24px 12px 24px;
+  padding: 8px 24px;
   background: ${getButtonBackground()};
   overflow: hidden;
   box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;
@@ -47,7 +47,12 @@ const Button = styled.a`
 `;
 
 return (
-  <Button href={props.href} onClick={props.onClick} disabled={props.disabled}>
+  <Button
+    href={props.href}
+    onClick={props.onClick}
+    disabled={props.disabled}
+    style={{ ...props.style }}
+  >
     {props.text}
   </Button>
 );
diff --git a/apps/potlock/widget/Index.jsx b/apps/potlock/widget/Index.jsx
@@ -5,15 +5,40 @@ const EDIT_PROJECT_TAB = "editproject";
 const PROJECTS_LIST_TAB = "projects";
 const PROJECT_DETAIL_TAB = "project";
 
-const monaSansCss = fetch("https://fonts.cdnfonts.com/css/mona-sans").body;
-
-if (!monaSansCss) return "";
-
 const Theme = styled.div`
   * {
     font-family: "Mona-Sans";
+    font-style: normal;
+    font-weight: 400;
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 400;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-Regular.woff) format("woff");
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 500;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-Medium.woff) format("woff");
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 600;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-SemiBold.woff) format("woff");
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 700;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-Bold.woff) format("woff");
   }
-  ${monaSansCss}
 `;
 
 State.init({

diff --git a/apps/potlock/widget/Nav.jsx b/apps/potlock/widget/Nav.jsx
@@ -81,7 +81,7 @@ const NavTab = styled.a`
 
 const tabOptions = [
   { text: "Projects", link: "projects", disabled: false },
-  { text: "Pot", link: "pot", disabled: true },
+  { text: "Pots", link: "pots", disabled: true },
   { text: "Feed", link: "feed", disabled: true },
 ];
 

diff --git a/apps/potlock/widget/Project/Body.jsx b/apps/potlock/widget/Project/Body.jsx
@@ -3,7 +3,9 @@ const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
 
 const profile = props.profile;
 
-if (!profile) return "Loading PROFILE...";
+if (!profile) return "Loading...";
+
+const loraCss = fetch("https://fonts.cdnfonts.com/css/lora").body;
 
 const tags = Object.keys(profile.tags ?? {});
 
@@ -26,8 +28,9 @@ const Name = styled.div`
   font-size: 48px;
   font-weight: 500;
   color: #2e2e2e;
-  line-height: 48px;
-  // font-family: Lora
+  line-height: 56px;
+  font-family: "Lora";
+  ${loraCss}
 `;
 
 const AccountId = styled.div`

diff --git a/apps/potlock/widget/Project/FollowStats.jsx b/apps/potlock/widget/Project/FollowStats.jsx
@@ -25,7 +25,9 @@ return (
           href={`#/mob.near/widget/FollowPage?accountId=${accountId}&tab=following`}
           className="text-dark"
         >
-          <span className="fw-bolder me-2">Following</span>
+          <span style={{ fontWeight: 500 }} className="me-2">
+            Following
+          </span>
           {numFollowing !== null ? <span className="text-muted">{numFollowing}</span> : "?"}
         </a>
       </div>
@@ -34,7 +36,9 @@ return (
           href={`#/mob.near/widget/FollowPage?accountId=${accountId}&tab=followers`}
           className="text-dark"
         >
-          <span className="fw-bolder me-2">Follower{numFollowers !== 1 && "s"}</span>
+          <span style={{ fontWeight: 500 }} className="me-2">
+            Follower{numFollowers !== 1 && "s"}
+          </span>
           {numFollowers !== null ? <span className="text-muted">{numFollowers}</span> : "?"}
         </a>
       </div>

diff --git a/apps/potlock/widget/Project/ListPage.jsx b/apps/potlock/widget/Project/ListPage.jsx
@@ -160,6 +160,7 @@ return (
                 type: "primary",
                 text: "Explore projects",
                 disabled: false,
+                style: { padding: "16px 24px" },
               }}
             />
           ),
@@ -171,6 +172,7 @@ return (
                 text: "Create project",
                 disabled: false,
                 href: `?tab=createproject`,
+                style: { padding: "16px 24px" },
               }}
             />
           ),

diff --git a/build/potlock/src/Buttons/ActionButton.jsx b/build/potlock/src/Buttons/ActionButton.jsx
@@ -29,7 +29,7 @@ const Button = styled.button`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 8px 24px 12px 24px;
+  padding: 8px 24px;
   background: ${getButtonBackground()};
   overflow: hidden;
   box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;

diff --git a/build/potlock/src/Buttons/NavigationButton.jsx b/build/potlock/src/Buttons/NavigationButton.jsx
@@ -26,7 +26,7 @@ const Button = styled.a`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 8px 24px 12px 24px;
+  padding: 8px 24px;
   background: ${getButtonBackground()};
   overflow: hidden;
   box-shadow: 0px -2.700000047683716px 0px #4a4a4a inset;
@@ -47,7 +47,12 @@ const Button = styled.a`
 `;
 
 return (
-  <Button href={props.href} onClick={props.onClick} disabled={props.disabled}>
+  <Button
+    href={props.href}
+    onClick={props.onClick}
+    disabled={props.disabled}
+    style={{ ...props.style }}
+  >
     {props.text}
   </Button>
 );
diff --git a/build/potlock/src/Index.jsx b/build/potlock/src/Index.jsx
@@ -5,15 +5,40 @@ const EDIT_PROJECT_TAB = "editproject";
 const PROJECTS_LIST_TAB = "projects";
 const PROJECT_DETAIL_TAB = "project";
 
-const monaSansCss = fetch("https://fonts.cdnfonts.com/css/mona-sans").body;
-
-if (!monaSansCss) return "";
-
 const Theme = styled.div`
   * {
     font-family: "Mona-Sans";
+    font-style: normal;
+    font-weight: 400;
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 400;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-Regular.woff) format("woff");
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 500;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-Medium.woff) format("woff");
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 600;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-SemiBold.woff) format("woff");
+  }
+  @font-face {
+    font-family: mona-sans;
+    font-style: normal;
+    font-weight: 700;
+    src: local("Mona-Sans"),
+      url(https://fonts.cdnfonts.com/s/91271/Mona-Sans-Bold.woff) format("woff");
   }
-  ${monaSansCss}
 `;
 
 State.init({

diff --git a/build/potlock/src/Nav.jsx b/build/potlock/src/Nav.jsx
@@ -81,7 +81,7 @@ const NavTab = styled.a`
 
 const tabOptions = [
   { text: "Projects", link: "projects", disabled: false },
-  { text: "Pot", link: "pot", disabled: true },
+  { text: "Pots", link: "pots", disabled: true },
   { text: "Feed", link: "feed", disabled: true },
 ];
 

diff --git a/build/potlock/src/Project/Body.jsx b/build/potlock/src/Project/Body.jsx
@@ -3,7 +3,9 @@ const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
 
 const profile = props.profile;
 
-if (!profile) return "Loading PROFILE...";
+if (!profile) return "Loading...";
+
+const loraCss = fetch("https://fonts.cdnfonts.com/css/lora").body;
 
 const tags = Object.keys(profile.tags ?? {});
 
@@ -26,8 +28,9 @@ const Name = styled.div`
   font-size: 48px;
   font-weight: 500;
   color: #2e2e2e;
-  line-height: 48px;
-  // font-family: Lora
+  line-height: 56px;
+  font-family: "Lora";
+  ${loraCss}
 `;
 
 const AccountId = styled.div`

diff --git a/build/potlock/src/Project/FollowStats.jsx b/build/potlock/src/Project/FollowStats.jsx
@@ -25,7 +25,9 @@ return (
           href={`#/mob.near/widget/FollowPage?accountId=${accountId}&tab=following`}
           className="text-dark"
         >
-          <span className="fw-bolder me-2">Following</span>
+          <span style={{ fontWeight: 500 }} className="me-2">
+            Following
+          </span>
           {numFollowing !== null ? <span className="text-muted">{numFollowing}</span> : "?"}
         </a>
       </div>
@@ -34,7 +36,9 @@ return (
           href={`#/mob.near/widget/FollowPage?accountId=${accountId}&tab=followers`}
           className="text-dark"
         >
-          <span className="fw-bolder me-2">Follower{numFollowers !== 1 && "s"}</span>
+          <span style={{ fontWeight: 500 }} className="me-2">
+            Follower{numFollowers !== 1 && "s"}
+          </span>
           {numFollowers !== null ? <span className="text-muted">{numFollowers}</span> : "?"}
         </a>
       </div>

diff --git a/build/potlock/src/Project/ListPage.jsx b/build/potlock/src/Project/ListPage.jsx
@@ -160,6 +160,7 @@ return (
                 type: "primary",
                 text: "Explore projects",
                 disabled: false,
+                style: { padding: "16px 24px" },
               }}
             />
           ),
@@ -171,6 +172,7 @@ return (
                 text: "Create project",
                 disabled: false,
                 href: `?tab=createproject`,
+                style: { padding: "16px 24px" },
               }}
             />
           ),