React-NotesApp/src/styles.tsx

const styles: { [key: string]: React.CSSProperties } = {
  background: {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "#002d4c",
    minHeight: "100vh",
    paddingBottom: 128,
  },
  header: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "sticky",
    backgroundColor: "#0087e4",
    margin: "2vh",
    height: "8vh",
    padding: 8,
    borderRadius: 4,
  },
  header_contentwrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  window: {
    alignSelf: "center",
    width: "60%",
    minHeight: "128px",
    display: "flex",
    flexDirection: "column",
    backgroundColor: "#0087e4",
    margin: 16,
    padding: 16,
    borderRadius: 16,
  },
  note: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#001018",
    margin: "2vh",
    width: "50%",
    alignSelf: "center",
    padding: 32,
    borderRadius: 32,
  },
  note_content: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#00293e",
    width: "90%",
    margin: "2vh",
    padding: 8,
    paddingBottom: 64,
    paddingTop: 64,
    borderRadius: 4,
  },
  input_notetitle: {
    alignSelf: "center",
    backgroundColor: "#001018",
    borderRadius: 4,
    borderColor: "#00293e",
    outline: "none",
    color: "white",
    height: "3vh",
    fontSize: "2vh",
    fontWeight: "bold",
  },
  input_notebody: {
    alignSelf: "center",
    backgroundColor: "#00293e",
    maxWidth: "100%",
    borderRadius: 4,
    border: "none",
    outline: "none",
    color: "white",
    height: "100%",
    width: "100%",
    maxHeight: "100vh",
    fontSize: "2vh",
    fontWeight: "bold",
  },
  button_green: {
    backgroundColor: "#0dbc6a",
    alignSelf: "center",
    display: "flex",
    flexDirection: "row",
    width: "256x",
    marginTop: 4,
    marginBottom: 4,
  },
  button_yellow: {
    backgroundColor: "#e2b465",
    alignSelf: "center",
    display: "flex",
    flexDirection: "row",
    width: "256x",
    marginTop: 4,
    marginBottom: 4,
  },
  button_red: {
    backgroundColor: "#bc231e",
    alignSelf: "center",
    display: "flex",
    flexDirection: "row",
    width: "256px",
    marginTop: 4,
    marginBottom: 4,
  },
  text_small: {
    color: "white",
    fontSize: "2vh",
    fontWeight: "bold",
    textAlign: "center",
  },
  text_small_red: {
    color: "#bc231e",
    fontSize: "2vh",
    fontWeight: "bold",
    textAlign: "center",
  },

  text_medium: {
    color: "white",
    fontSize: "4vh",
    fontWeight: "bold",
    textAlign: "center",
  },
  flex_column: {
    display: "flex",
    flexDirection: "column",
  },
  flex_row: {
    width: "100%",
    justifyContent: "center",
    display: "flex",
    flexDirection: "row",
  },
};

export default styles;