update og image

gustavoquinalha · Jul 16, 2024 · a6ec65b · a6ec65b
1 parent 990832b
commit a6ec65b
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 111 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,7 +6,7 @@
   >
     <form [formGroup]="form" class="p-4 md:p-8 w-full">
       <div class="w-full max-w-xs text-center mx-auto">
-        <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
+        <h1 class="mb-4 md:mb-8 text-sm leading-4 text-white">
           Just type the data and generate the meta tags for your website
         </h1>
       </div>
@@ -16,13 +16,13 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
           *ngFor="let field of metatagsList"
         >
           <ng-container *ngIf="field.type === 'text' || field.type === 'color'">
-            <label [for]="field.name" class="leading-4 text-xs text-zinc-200">{{
+            <label [for]="field.name" class="leading-4 text-xs text-white">{{
               field.label
             }}</label>
 
             <div
               *ngIf="field.name === 'image' && form?.get('image')"
-              class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-700 overflow-hidden"
+              class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
             >
               <img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" width="100%" alt="" />
             </div>
@@ -34,7 +34,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                 [name]="field.name"
                 [placeholder]="field.label"
                 [formControlName]="field.name"
-                class="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                class="h-8 text-xs w-full bg-zinc-900 rounded border placeholder:text-zinc-500 border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
               />
               <ng-container class="" *ngIf="field.name === 'color'">
                 <input
@@ -53,19 +53,19 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                 </div>
               </ng-container>
             </div>
-            <span class="text-xs text-zinc-400 leading-4 mt-1">{{
+            <span class="text-xs text-zinc-500 leading-4 mt-1">{{
               field.description
             }}</span>
           </ng-container>
 
           <ng-container *ngIf="field.type === 'select'">
-            <label [for]="field.name" class="leading-4 text-xs text-zinc-200">{{
+            <label [for]="field.name" class="leading-4 text-xs text-white">{{
               field.label
             }}</label>
             <select
               [id]="field.name"
               [formControlName]="field.name"
-              class="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+              class="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
             >
               <option
                 *ngFor="let option of field.options"
@@ -74,7 +74,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                 {{ option.value }}
               </option>
             </select>
-            <span class="text-xs text-zinc-400 leading-4 mt-1">{{
+            <span class="text-xs text-zinc-500 leading-4 mt-1">{{
               field.description
             }}</span>
           </ng-container>
@@ -86,7 +86,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
   </div>
 
   <div
-    class="resize-none md:resize-x w-full md:w-[33.3333%] flex-grow mx-auto flex flex-col h-full md:h-[calc(100vh-56px)] overflow-hidden border-r border-zinc-800"
+    class="resize-none md:resize-x w-full md:w-[33.3333%] flex-grow mx-auto flex flex-col h-full md:h-[calc(100vh-56px)] overflow-hidden border-r border-zinc-800 p-4 md:p-0"
   >
     <app-code-result [code]="code" class="h-full" />
   </div>

diff --git a/src/app/components/code-result/code-result.component.html b/src/app/components/code-result/code-result.component.html
@@ -1,13 +1,13 @@
 <div class="relative h-full">
-  <div class="absolute top-2 right-6 flex justify-center items-center z-10">
+  <div class="absolute top-2 right-2 md:right-6 flex justify-center items-center z-10">
     <button
       (click)="copy()"
-      class="h-6 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 hover:text-zinc-50 rounded text-xs px-2 py-2 flex justify-center items-center">
+      class="h-6 bg-zinc-800 hover:bg-zinc-700 text-white hover:text-zinc-50 rounded text-xs px-2 py-2 flex justify-center items-center">
       Copy
     </button>
   </div>
   <pre class="w-full h-full appearance-none !m-0 !p-0 flex relative">
-    <code class="w-full h-full appearance-none !m-0 !p-4 !bg-zinc-950 text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll" [highlight]="code" [language]="'html'"></code>
+    <code class="w-full h-full appearance-none !m-0 !p-4 !bg-zinc-900 md:!bg-zinc-950 rounded md:rounded-none text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll" [highlight]="code" [language]="'html'"></code>
   </pre>
 
 </div>
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
@@ -6,14 +6,14 @@
     <a
       href="https://github.com/gustavoquinalha"
       target="_blank"
-      class="text-zinc-400 hover:text-zinc-200 hover:underline underline-offset-1"
+      class="text-zinc-400 hover:text-white hover:underline underline-offset-1"
       >Gustavo Quinalha</a
     >
     &
     <a
       href="https://github.com/userjapa"
       target="_blank"
-      class="text-zinc-400 hover:text-zinc-200 hover:underline underline-offset-1"
+      class="text-zinc-400 hover:text-white hover:underline underline-offset-1"
       >Japa</a
     >
     — All rights reserved.

diff --git a/src/app/components/menu/menu.component.html b/src/app/components/menu/menu.component.html
@@ -19,11 +19,11 @@
       [(ngModel)]="url"
       (keydown.enter)="fetchMetadata()"
       placeholder="https://gus.vision"
-      class="w-full pr-14 h-8 text-xs bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-200 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+      class="w-full pr-14 h-8 text-xs bg-zinc-900 rounded border border-zinc-800 focus:border-white focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
     />
     <button
       (click)="fetchMetadata()"
-      class="absolute top-1 right-1 h-6 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 hover:text-zinc-50 rounded text-xs px-2 py-2 flex items-center justify-center"
+      class="absolute top-1 right-1 h-6 bg-zinc-800 hover:bg-zinc-700 text-white hover:text-zinc-50 rounded text-xs px-2 py-2 flex items-center justify-center"
     >
       Fetch
     </button>

diff --git a/src/app/components/preview/preview.component.html b/src/app/components/preview/preview.component.html
@@ -1,8 +1,8 @@
 <div
-  class="text-zinc-200 gap-4 md:gap-8 h-full flex flex-col mb-4 md:mb-8 lg:mb-10 pb-4 md:pb-8 lg:pb-10"
+  class="text-white gap-4 md:gap-8 h-full flex flex-col mb-4 md:mb-8 lg:mb-10 pb-4 md:pb-8 lg:pb-10"
 >
   <div class="w-full max-w-xl">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Google</div>
+    <div class="text-xs text-white uppercase mb-2">Google</div>
     <div class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="text-base text-[#99c3ff]">
         {{ content?.title || "Page title" }}
@@ -17,7 +17,7 @@
   </div>
 
   <div class="w-full max-w-lg">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Twitter</div>
+    <div class="text-xs text-white uppercase mb-2">Twitter</div>
     <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
         <img
@@ -29,7 +29,7 @@
         />
       </div>
       <div class="w-full flex flex-col gap-1 p-4">
-        <div class="text-base text-zinc-200 font-medium">
+        <div class="text-base text-white font-medium">
           {{ content?.title || "Page title" }}
         </div>
         <div class="text-xs text-zinc-400">
@@ -43,7 +43,7 @@
   </div>
 
   <div class="w-full max-w-lg">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Facebook</div>
+    <div class="text-xs text-white uppercase mb-2">Facebook</div>
     <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="bg-zinc-800 w-full h-52 min-h-52 overflow-hidden border-b border-zinc-800">
         <img
@@ -58,7 +58,7 @@
         <div class="text-xs text-zinc-400 uppercase">
           {{ content?.canonical || "https://pageurl.com" }}
         </div>
-        <div class="text-base text-zinc-200 font-medium">
+        <div class="text-base text-white font-medium">
           {{ content?.title || "Page title" }}
         </div>
         <div class="text-xs text-zinc-400">
@@ -69,7 +69,7 @@
   </div>
 
   <div class="w-full max-w-xl">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Linkedin</div>
+    <div class="text-xs text-white uppercase mb-2">Linkedin</div>
     <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
         <img
@@ -81,7 +81,7 @@
         />
       </div>
       <div class="w-full flex flex-col gap-1 p-4">
-        <div class="text-xs text-zinc-200 font-medium">
+        <div class="text-xs text-white font-medium">
           {{ content?.title || "Page title" }}
         </div>
         <div class="text-xs text-zinc-400">
@@ -91,5 +91,5 @@
     </div>
   </div>
 
-  <div class="min-h-4 md:min-h-8"></div>
+  <div class="hidden md:flex min-h-4 md:min-h-8"></div>
 </div>
diff --git a/src/assets/dracula.css b/src/assets/dracula.css
diff --git a/src/assets/intro.webp b/src/assets/intro.webp
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/index.html b/src/index.html
@@ -46,7 +46,7 @@
 
     <!-- Meta Tags Generated via https://seotopper.netlify.app/ -->
   </head>
-  <body class="bg-zinc-950 min-h-screen text-zinc-200 text-base">
+  <body class="bg-zinc-950 min-h-screen text-white text-base">
     <!-- Google Tag Manager (noscript) -->
     <noscript
       ><iframe

diff --git a/src/styles.scss b/src/styles.scss
@@ -2,9 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "~assets/dracula.css";
-// @import 'highlight.js/styles/dark.css';
-
 :root {
   color-scheme: dark;
 }