Ivy-Frontend/src/styles.tsx

const styles: { [key: string]: React.CSSProperties } = {
  route_wrapper: {
    width: "85%",
    position: "fixed",
    left: "15%",
    overflowY: "scroll",
    height: "100%",
    backgroundColor: "#0b2322",
  },
  text_tiny: {
    fontSize: "0.6vw",
    color: "white",
    fontWeight: "bold",
  },
  text_small: {
    fontSize: "0.8vw",
    color: "white",
    fontWeight: "bold",
  },
  text: {
    fontSize: "1.3vw",
    color: "white",
    fontWeight: "bold",
  },
  text_medium: {
    fontSize: "1.2vw",
    color: "white",
    fontWeight: "bold",
  },
  text_large: {
    fontSize: "2.2vw",
    color: "white",
    fontWeight: "bold",
  },
  text_extra_large: {
    fontSize: "3.2vw",
    color: "white",
    fontWeight: "bold",
  },
  text_red: {
    fontSize: "1.3vw",
    color: "#a44141",
    fontWeight: "bold",
  },
  text_orange: {
    fontSize: "1.3vw",
    color: "#c57331",
    fontWeight: "bold",
  },
  text_green: {
    fontSize: "1.3vw",
    color: "#80b28a",
    fontWeight: "bold",
  },
  logo_title: {
    color: "#80b38b",
    fontSize: 26,
    fontWeight: "bold",
  },
  header_wrapper: {
    display: "flex",
    flexDirection: "row",
    position: "sticky",
    top: 0,
    backgroundColor: "#3d4848",
    paddingRight: 32,
    paddingLeft: 0,
  },
  header_left: {
    display: "flex",
    flexDirection: "row",
    width: "50%",
    justifyContent: "left",
    alignItems: "center",
    paddingLeft: 16,
  },
  header_right: {
    display: "flex",
    flexDirection: "row",
    width: "50%",
    justifyContent: "right",
    alignItems: "center",
  },
  login_button: {
    backgroundColor: "#9e8500",
    width: "120%",
    height: 32,
    border: "none",
    padding: 8,
    borderRadius: 16,
  },
  button_add_product: {
    backgroundColor: "#80b38b",
    display: "flex",
    flexDirection: "row",
    width: "256px",
    height: "48px",
    border: "none",
    padding: 8,
    borderRadius: 16,
    gap: 4,
  },
  logout_button: {
    backgroundColor: "#0b2322",
    width: "30vh",
    height: "6vh",
    border: "none",
    padding: 8,
    borderRadius: 16,
    borderTopLeftRadius: 32,
    borderBottomLeftRadius: 32,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    justifyContent: "left",
  },
  sidebar_button: {
    backgroundColor: "#0b2322",
    width: "30vh",
    height: "6vh",
    border: "none",
    padding: 8,
    paddingRight: "32",
    borderTopLeftRadius: 32,
    borderBottomLeftRadius: 32,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    justifyContent: "left",
  },
  widget: {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "#1d3b33",
    borderRadius: 8,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 32,
    margin: 8,
    lineHeight: 0.5,
  },
  content_row: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  },
  content_column: {
    display: "flex",
    flexDirection: "column",
    lineHeight: 0,
  },
  content_center: {
    display: "flex",
    justifyContent: "center",
    textAlign: "center",
  },
  flex_row: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  },
  flex_column: {
    display: "flex",
    flexDirection: "column",
  },
  sidebar_container: {
    height: "100vh",
    width: "100%",
    paddingLeft: "2vh",
    backgroundColor: "#3d4848",
  },
};

export default styles;