Rebrand public app to “Pinboard”

README.md

@@ -1,10 +1,10 @@
-# Pinterest-Clone
+# Pinboard
 
 [![codecov](https://codecov.io/gh/Dereje1/Pinterest-Clone/branch/master/graph/badge.svg?token=k3bnvXaDh3)](https://codecov.io/gh/Dereje1/Pinterest-Clone)
 
-### A clone of the Pinterest application for educational purposes
+### An educational Pinterest-inspired full-stack application built as a learning project
 
-Explore the live application: [Pinterest-Clone](https://pclone.derejegetahun.com/)
+Explore the live application: [Pinboard](https://pclone.derejegetahun.com/)
 
 Use the app to generate images using a web link, upload your own images, or use OpenAI image generation.
 

client/index.html

@@ -2,11 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link href="https://fonts.googleapis.com/css?family=Spectral+SC|Berkshire+Swash" rel="stylesheet">
     <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pinterest Clone</title>
+    <meta name="description" content="Pinboard is an educational full-stack application for discovering and saving visual ideas." />
+    <meta property="og:title" content="Pinboard" />
+    <meta property="og:description" content="Discover, save, and share visual ideas with Pinboard." />
+    <meta property="og:type" content="website" />
+    <title>Pinboard</title>
   </head>
   <body>
     <div id="app"></div>

client/src/components/cover/cover.scss

@@ -32,41 +32,48 @@
       transform: translateX(-50%);
       display: flex;
       flex-direction: column;
-      justify-content: space-around;
+      justify-content: center;
       align-items: center;
+      gap: 28px;
+      text-align: center;
       background: white;
       border-radius: 10px;
+      .cover-content{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        width: 100%;
+        padding: 0 32px;
+        box-sizing: border-box;
+      }
       #logo{
         display: flex;
         justify-content: center;
+        align-items: center;
         font-size: 40px;
         color:#b20e0e;
+        line-height: 1;
       }
       #welcome{
-            margin-top: 20px;
             font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', arial, sans-serif;
             font-size: 28px;
             font-weight: bold;
             color:#555;
       }
       #subheader{
-        margin-top: 10px;
-        margin-bottom: 10px;
         font-weight: bold;
         color: #ccc;
         font-size: 24px;
         text-align: center;
       }
       #disclaimer{
-        margin-top: 30px;
         font-weight: bold;
         color: #ee2323;
         font-size: 18px;
         text-align: center;
-        margin-top: 10px;
       }
       #gitsource{
-        margin-top: 20px;
         text-align: center;
         text-decoration: none;
         text-transform: full-width;
@@ -81,6 +88,11 @@
           text-decoration: none;
         }
       }
+      .cover-actions{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
     }
   }
 

client/src/components/cover/cover.tsx

@@ -6,19 +6,19 @@ function Cover() {
   return (
     <div id="cover">
       <div id="logincard">
-        <div>
-          <div id="logo"><i className="fa fa-pinterest" aria-hidden="true" /></div>
-          <div id="welcome">Welcome to Pinterest</div>
-          <div id="subheader">Find new ideas to try</div>
-          <div id="disclaimer">Cloned For Educational Purposes Only!</div>
+        <div className="cover-content">
+          <div id="logo"><i className="fa fa-th-large" aria-hidden="true" /></div>
+          <div id="welcome">Welcome to Pinboard</div>
+          <div id="subheader">Discover, save, and share visual ideas</div>
+          <div id="disclaimer">An educational visual discovery project.</div>
           <div id="gitsource">
             <a href="https://github.com/Dereje1/Pinterest-Clone" target="_blank" rel="noopener noreferrer">
               <i className="fa fa-github" aria-hidden="true" />
               {' Github'}
             </a>
           </div>
         </div>
-        <div>
+        <div className="cover-actions">
           <LoginButtons guest={() => ({})} />
         </div>
       </div>

client/src/components/menu/menu.scss

@@ -12,11 +12,26 @@
     font-weight: bold;
     color: #5e6870;
     z-index: 1000;
+    .brand-actions{
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+    .sort-toggle{
+      flex: 0 0 auto;
+    }
     .brand{
       margin-left: 5%;
+      display: flex;
+      align-items: center;
+      height: 50px;
       >a{
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
         text-decoration: none;
         font-size: 30px;
+        line-height: 1;
         color:#b20e0e;
       }
     }

client/src/components/menu/menu.tsx

@@ -27,8 +27,8 @@ export function Brand() {
   return (
     <div className="brand">
       <a href="https://github.com/Dereje1/Pinterest-Clone" target="_blank" rel="noopener noreferrer">
-        <i className="fa fa-pinterest" aria-hidden="true" />
-        {' Clone'}
+        <i className="fa fa-th-large" aria-hidden="true" />
+        {' Pinboard'}
       </a>
     </div>
   );
@@ -103,9 +103,9 @@ export class Menu extends React.Component<MenuProps, MenuState> {
 
     return (
       <>
-        <div style={{ display: 'flex', width: 175, justifyContent: 'space-between' }}>
+        <div className="brand-actions">
           <Brand />
-          <IconButton onClick={() => toggleSort('', false, !sort)}>
+          <IconButton className="sort-toggle" onClick={() => toggleSort('', false, !sort)}>
             {
               sort ? <ShuffleIcon color="primary" /> : <SortIcon color="secondary" />
             }

tests/client/src/components/cover/__snapshots__/cover.test.tsx.snap

@@ -7,29 +7,31 @@ exports[`The landing page will display the cover 1`] = `
   <div
     id="logincard"
   >
-    <div>
+    <div
+      className="cover-content"
+    >
       <div
         id="logo"
       >
         <i
           aria-hidden="true"
-          className="fa fa-pinterest"
+          className="fa fa-th-large"
         />
       </div>
       <div
         id="welcome"
       >
-        Welcome to Pinterest
+        Welcome to Pinboard
       </div>
       <div
         id="subheader"
       >
-        Find new ideas to try
+        Discover, save, and share visual ideas
       </div>
       <div
         id="disclaimer"
       >
-        Cloned For Educational Purposes Only!
+        An educational visual discovery project.
       </div>
       <div
         id="gitsource"
@@ -47,7 +49,9 @@ exports[`The landing page will display the cover 1`] = `
         </a>
       </div>
     </div>
-    <div>
+    <div
+      className="cover-actions"
+    >
       <Connect(LoginButtons)
         guest={[Function]}
       />

tests/client/src/components/menu/__snapshots__/menu.test.tsx.snap

@@ -11,16 +11,11 @@ exports[`The Menu component will render for an authenticated user 1`] = `
     pathname="/"
   />
   <div
-    style={
-      {
-        "display": "flex",
-        "justifyContent": "space-between",
-        "width": 175,
-      }
-    }
+    className="brand-actions"
   >
     <Brand />
     <ForwardRef(IconButton)
+      className="sort-toggle"
       onClick={[Function]}
     >
       <Memo(ForwardRef(SortIcon))
@@ -47,16 +42,11 @@ exports[`The Menu component will render for users authenticated as guest 1`] = `
     pathname="/"
   />
   <div
-    style={
-      {
-        "display": "flex",
-        "justifyContent": "space-between",
-        "width": 175,
-      }
-    }
+    className="brand-actions"
   >
     <Brand />
     <ForwardRef(IconButton)
+      className="sort-toggle"
       onClick={[Function]}
     >
       <Memo(ForwardRef(SortIcon))
@@ -96,9 +86,9 @@ exports[`The Menu component will render the brand 1`] = `
   >
     <i
       aria-hidden="true"
-      className="fa fa-pinterest"
+      className="fa fa-th-large"
     />
-     Clone
+     Pinboard
   </a>
 </div>
 `;