reestilização dos botões e adição de favicon e logo

commandee · Nov 4, 2023 · a02adb2 · a02adb2
1 parent 6e24dce
commit a02adb2
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 93 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -1,5 +1,4 @@
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
 import autoprefixer from "autoprefixer";
 import cssnano from "cssnano";
 import node from "@astrojs/node";
@@ -10,7 +9,7 @@ import image from "@astrojs/image";
 // https://astro.build/config
 export default defineConfig({
   site: "https://commandee-web-production.up.railway.app",
-  integrations: [tailwind(), sitemap(), image({
+  integrations: [sitemap(), image({
     serviceEntryPoint: "@astrojs/image/sharp"
   })],
   output: "server",

diff --git a/public/icons/commandee_favicon.ico b/public/icons/commandee_favicon.ico
diff --git a/public/logos/commandee_logo.png b/public/logos/commandee_logo.png
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -8,16 +8,15 @@
           ><img src="/icon-github.svg" alt="" /></a
         >
       </li>
-      <li><a href=""><img src="/icon-linkedin.svg" alt="" /></a></li>
       <li><a href=""><img src="/icon-twitter.svg" alt="" /></a></li>
     </ul>
 
     <nav>
-      <a href="/contato">Contato</a>
-      <a href="/sobre">Sobre</a>
       <a href="/download">Download</a>
       <a href="/login">Login</a>
       <a href="/signup">Cadastro</a>
+      <a href="/sobre">Sobre</a>
+      <a href="/contato">Contato</a>
     </nav>
 
     <p>© 2023 Commandee Inc.</p>
@@ -56,9 +55,18 @@
     justify-content: center;
     align-items: center;
     gap: 0.5rem;
+
+  }
+
+  nav a{
+    color: var(--textolight);
   }
 
   nav a:hover {
     color: lightgrey;
   }
+
+  li>a>img:hover {
+    transform: scale(1.1);
+  }
 </style>
diff --git a/src/components/FormCadastro.astro b/src/components/FormCadastro.astro
@@ -9,28 +9,14 @@ import Form from "./Form.astro";
   <Form method="post" action="/api/user/signin" referrer="/">
     <div>
       <label for="name">Nome</label>
-      <input required placeholder="Joaquim" type="text" name="name" id="name" />
-    </div>
-
-    <div>
-      <label for="username">Nome de usuário</label>
-      <input
-        required
-        placeholder="joaquim123"
-        type="text"
-        name="username"
-        id="username"
-        pattern="[a-zA-Z0-9_-]+"
-        min="4"
-        max="15"
-      />
+      <input required placeholder="Digite seu nome" type="text" name="name" id="name" />
     </div>
 
     <div>
       <label for="email">Email</label>
       <input
         required
-        placeholder="joaquim@email.com"
+        placeholder="Digite seu email"
         type="email"
         name="email"
         id="email"
@@ -41,7 +27,7 @@ import Form from "./Form.astro";
       <label for="password">Senha</label>
       <input
         required
-        placeholder="********"
+        placeholder="Digite sua senha"
         type="password"
         name="password"
         id="password"
@@ -118,6 +104,18 @@ import Form from "./Form.astro";
     gap: 0.5rem;
   }
 
+  input {
+    border: none;
+    background-color: var(--secondary);
+    padding: 0.5rem 1rem !important;
+    border-radius: 1rem;
+  }
+
+  input:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--primary);
+  }
+
   @media (max-width: 768px) {
 
     .cadastro {
@@ -150,17 +148,6 @@ import Form from "./Form.astro";
     font-weight: bold;
   }
 
-  form input {
-    padding: 0.5rem;
-    background-color: var(--secondary);
-    border-radius: 5px;
-  }
-
-  form input::placeholder {
-    opacity: 1;
-    color: #9ca3af;
-  }
-
   button[type="submit"] {
     background-color: var(--accent) !important;
   }

diff --git a/src/components/FormLogin.astro b/src/components/FormLogin.astro
@@ -5,13 +5,13 @@ import Form from "./Form.astro";
 <Form action="/api/user/login" method="post" referrer="/">
   <div class="email">
     <label for="email">Email</label>
-    <input type="email" name="email" required />
+    <input type="email" name="email" placeholder="Digite seu email" required />
   </div>
 
   <div class="password">
     <label for="password">Senha</label>
     <a href="." class="password-reset">Esqueceu a senha?</a>
-    <input type="password" name="password" required />
+    <input type="password" name="password" placeholder="Digite sua senha" required />
   </div>
 
   <div class="submit">
@@ -66,8 +66,15 @@ import Form from "./Form.astro";
 
   .button {
     background-color: var(--accent) !important;
+    height: 2.5rem !important;
+    border-radius: 1rem !important;
   }
 
+  .button:hover{
+    cursor: pointer;
+  }
+
+
   label, input {
     display: block;
   }
@@ -108,7 +115,7 @@ import Form from "./Form.astro";
 
   a.password-reset:hover {
     text-decoration: underline;
-    color: deeppink;
+    color: var(--accent);
   }
 
   .submit {
@@ -142,11 +149,17 @@ import Form from "./Form.astro";
   }
 
   input {
+    border: transparent;
     background-color: var(--secondary);
     padding: 0.5rem 1rem !important;
     border-radius: 1rem;
   }
 
+  input:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--primary);
+  }
+
   a.login {
     display: grid;
     grid-template-columns: 1fr;

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -9,13 +9,15 @@ console.log(Astro.cookies);
 ---
 
 <nav>
-  <a href="/" class="logo-nav">Commandee</a>
+  <a href="/" class="logo-nav">
+    <img src="logos/commandee_logo.png" alt="logo commandee">
+    Commandee
+  </a>
   <ul>
     <!--<li><a href="/lista">Lista</a></li>-->
-    <li><a href="/">Home</a></li>
+    <li><a href="/download">Download</a></li>
     <li><a href="/sobre">Sobre</a></li>
     <li><a href="/contato">Contato</a></li>
-    <li><a href="/download">Download</a></li>
     <!-- lembrar de apagar depois -->
 
     {
@@ -48,6 +50,14 @@ console.log(Astro.cookies);
 
   nav a {
     text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    color: var(--textodark);
+  }
+
+  nav a img {
+    height: 2.5rem;
   }
 
   .logo-nav {

diff --git a/src/components/cards/CardAjuda.astro b/src/components/cards/CardAjuda.astro
@@ -3,12 +3,9 @@
     <h3>Precisando de Ajuda?</h3>
     <p>Entre em contato clicando abaixo:</p>
   </div>
-  <a
-    role="button"
-    href="/contato"
-    class="bg-neutral-100 hover:bg-neutral-400 text-blue-950 py-2 px-3 rounded-full"
-    >Entre em contato</a
-  >
+  <a href="/contato">
+    Entre em Contato
+  </a>
 </div>
 
 <style>
@@ -32,14 +29,18 @@
     font-size: 1.5em;
   }
 
-  a {
-    text-decoration: none;
+
+  a{
+    background-color: var(--textolight);
+    padding: 0.8rem;
+    border-radius: 1rem;
+    font-style: bold;
     color: var(--textodark);
-    margin-top: auto;
+
   }
 
-  a:hover {
-    color: var(--textodark);
+  a:hover{
+    background-color: lightgray;
   }
 
   @media only screen and (max-width: 768px) {

diff --git a/src/components/cards/CardTime.astro b/src/components/cards/CardTime.astro
@@ -6,11 +6,10 @@ export interface Props {
   integrante: string;
   funcao: string;
   twitter: string;
-  instagram: string;
   github: string;
 }
 
-const { imagem, integrante, funcao, twitter, instagram, github } = Astro.props;
+const { imagem, integrante, funcao, twitter, github } = Astro.props;
 ---
 
 <article>
@@ -40,18 +39,7 @@ const { imagem, integrante, funcao, twitter, instagram, github } = Astro.props;
         />
       </a>
     </li>
-    <li>
-      <a href={instagram} target="_blank">
-        <Image
-          src="/logos/instagram.svg"
-          alt="Instagram logo"
-          format="svg"
-          width={20}
-          height={20}
-        />
-      </a>
-    </li>
-    <li>
+       <li>
       <a href={github} target="_blank">
         <Image
           src="/logos/githubcolorido.svg"
@@ -62,17 +50,7 @@ const { imagem, integrante, funcao, twitter, instagram, github } = Astro.props;
         />
       </a>
     </li>
-    <li>
-      <a href="" target="_blank">
-        <Image
-          src="/logos/google.svg"
-          alt="Google logo"
-          format="svg"
-          width={20}
-          height={20}
-        />
-      </a>
-    </li>
+
   </ul>
 </article>