• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• nlw06-letmeask-master
  • .github
  • src
    • App.tsx
    • services
      • firebase.ts
    • pages
      • NewRoom
        • index.tsx
      • Room
        • index.tsx
        • styles.ts
      • AdminRoom
        • index.tsx
        • styles.ts
      • NotFound
        • index.tsx
        • styles.ts
      • Home
        • index.tsx
      • Rooms
        • index.tsx
        • styles.ts
    • index.tsx
    • hooks
      • useAuth.ts
      • useRoom.ts
      • useTheme.ts
      • useRooms.ts
    • components
      • Input
        • index.tsx
        • styles.ts
      • RoomCode
        • index.tsx
        • styles.ts
      • Modal
        • index.tsx
        • styles.ts
      • RoomCard
        • index.tsx
        • styles.ts
      • Button
        • index.tsx
        • styles.ts
      • Card
        • index.tsx
        • styles.ts
      • Question
        • index.tsx
        • styles.ts
      • Header
        • index.tsx
        • styles.ts
      • Toast
        • index.tsx
        • styles.ts
      • Badge
        • index.tsx
        • styles.ts
      • Letmeask
        • index.tsx
        • styles.ts
      • ToggleTheme
        • index.tsx
        • styles.ts
      • NotFoundIcon
        • index.tsx
    • routers
      • index.tsx
    • contexts
      • AuthContext.tsx
      • ThemeContext.tsx
    • styles
      • authPages.ts
      • globalTheme.ts
      • styled.d.ts
      • theme.ts
      • modalBackground.ts
    • react-app-env.d.ts
    • assets
      • images
  • public
    • _redirects
    • index.html
  • .env.example
  • LICENSE
  • README.md
  • package.json
  • tsconfig.json
  • .gitignore

import styled, {keyframes} from "styled-components";


const FadeIn = keyframes`
  from {
    right: -3em; 
    opacity: 0;
  }
  to {
    right: 0; 
    opacity: 1;
  }
`;

const FadeOut = keyframes`
  from {
    right: 0; 
    opacity: 1;
  }
  to {
    right: -3em; 
    opacity: 0;
  }
`;

export const Container = styled.div`
  font-weight:500;
  color:${({ theme }) => theme.colors.white.light};
  min-width: 250px; 
  
  color: #fff; 
  text-align: center; 
  border-radius: ${({ theme }) => theme.borderRadius.md} 0 0 ${({ theme }) => theme.borderRadius.md}; /* Rounded borders */
  padding: 16px; 
  position: fixed; 
  z-index: 3; 
  right: 0; 
  top: 30px; 

  &.animation{
    animation: ${FadeIn} 0.5s, ${FadeOut} .5s 1s;
    animation-fill-mode: none, forwards;
  }
  
  &.info{
    background-color: ${({ theme }) => theme.colors.purple.light};
  }

  &.warning{
    background-color: #FFA000;
  }

  &.error{
    background-color: ${({ theme}) => theme.colors.danger};
  }
  
  

  p{
    display:flex;
    align-items: center;
    gap:10px;
    opacity:0.9;
  }
`;