DanielCeron-dc

.base {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.span {
    position: absolute;
    bottom: 5px;
    left: 10px; 

DanielCeron-dc

/* the variables are in another gist CSS-VARIABLES */
.button {
    background: var(--primary);
    border: 1px solid var(--primary-dark);
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;

DanielCeron-dc

import { FormEvent } from "react";

export type IRef = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement|  null; 


interface Iresponse {
    [key:string]: {
        value: string;
        valid: boolean;
    }

DanielCeron-dc

import React, { useState } from 'react';

const useWindow = (): {isMobile:boolean, isTablet:boolean, isDesktop:boolean} => {
    
    const [isMobile, setIsMobile] = useState(false);
    const [isTablet, setIsTablet] = useState(false);
    const [isDesktop, setIsDesktop] = useState(true);
    

    React.useEffect(() => {

DanielCeron-dc

interface IValue {
    value: string;
    key: string;
}

class localStorageList {
    values: IValue[] = [];
    key: string;
    constructor(key: string) {

DanielCeron-dc

/* this is the css file for the variables.css file */
:root {
    --primary: #36393f; 
    --primary-dark: #2f3136;
    --secondary: mediumseagreen; /* navbars */
    --secondary-dark: rgb(40, 122, 77);
    --tertiary: #34568B;
    --tertiary-dark: #29446e;
    --quaternary: #FF6F61;
    --quaternary-dark: #cc564b;

DanielCeron-dc

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

DanielCeron-dc

.navbar {
    background: var(--secondary); 
    height: 60px;
    position: sticky;
    display: flex; 
    top: 0; 
    left: 0; 
    z-index: 2;
    justify-content: flex-end;
    align-items: flex-start;

DanielCeron-dc

import React, { CSSProperties } from "react";

const style: CSSProperties = {
    backgroundColor: "var(--secondary)",
    height: 50,
    width: "100%",
    display: "flex",
    position: "sticky",
    top: 0,
    left: 0,

DanielCeron-dc

.base {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex; 
    justify-content: center;
    align-items: center;
    margin: 1rem;
    width: 20rem;
    height: 5rem;