Use bootstrap for more things.

Author: metamarcdw

dist/styles.css

@@ -1,28 +1,3 @@
-.padding {
- padding: 1.55rem;
-}
-
-.margin {
- margin-left: .4rem;
- margin-right: 1.55rem;
-}
-
-.width-80 {
- width: 80%;
-}
-
-.font-lg {
- font-size: 1.3rem;
-}
-
-.red-text {
- color: red;
-}
-
-.green-text {
- color: green;
-}
-
 .fixed-height {
  height: 2.5rem;
 }

src/components/App.py

@@ -34,7 +34,7 @@ def render_todo_panel(self):
  <div>
  <TodoListContainer />
  <Form
- className="padding"
+ className="p-4"
  onSubmit={self.on_submit}
  >
  <FormPanelContainer />
@@ -57,11 +57,11 @@ def render(self):
  >
  <Jumbotron>
  <div className="d-flex flex-column">
- <div className="d-flex justify-content-center align-items-center padding">
+ <div className="d-flex justify-content-center align-items-center p-4">
  <h2>My Todos</h2>
  </div>
  {visible_component}
- <span className="red-text">{error}</span>
+ <span className="text-danger">{error}</span>
  </div>
  </Jumbotron>
  </Col>

src/components/ButtonPanel.py

@@ -34,7 +34,7 @@ def on_click_logout(self):
  def render(self):
  return __pragma__("xtrans", None, "{}", """ (
  <div className="d-flex justify-content-center align-items-center">
- <div className="d-flex justify-content-around width-80">
+ <div className="d-flex justify-content-around w-75">
  <Button
  className="fixed-height"
  onClick={self.on_click_add}

src/components/LoginForm.py

@@ -40,7 +40,7 @@ def render(self):
  "username_text", "password_text")
 
  return __pragma__("xtrans", None, "{}", """ (
- <Form className="padding" onSubmit={self.on_submit_login}>
+ <Form className="p-4" onSubmit={self.on_submit_login}>
  <FormGroup>
  <Label for="username_text">Enter your username</Label>
  <Input
@@ -58,7 +58,7 @@ def render(self):
  id="password_text" />
  </FormGroup>
  <Button
- className="fixed-height margin"
+ className="fixed-height ml-2 mr-4"
  type="submit"
  >Login</Button>
  <Button

src/components/TodoList.py

@@ -59,11 +59,11 @@ def render_checkmark(self, todo):
  return None
 
  return __pragma__("xtrans", None, "{}", """ (
- <div className="d-flex flex-column justify-content-center align-items-center margin">
+ <div className="d-flex flex-column justify-content-center align-items-center ml-2 mr-4">
  <FontAwesomeIcon
  name="check-circle"
  size="2x"
- className="green-text" />
+ className="text-success" />
  </div>
  ); """)
 
@@ -74,11 +74,11 @@ def render_list_item(self, todo):
  key={todo.id}
  >
  {self.render_checkmark(todo)}
- <div className="d-flex flex-grow-1 font-lg">
- {todo.text}
+ <div className="d-flex flex-grow-1">
+ <h5>{todo.text}</h5>
  </div>
  <Button
- className="fixed-height margin"
+ className="fixed-height ml-2 mr-4"
  color="primary"
  onClick={self.on_click_complete(todo)}
  disabled={todo.complete}
@@ -100,7 +100,7 @@ def render(self):
  <ListGroup>
  {list_items}
  </ListGroup>
- <span className="red-text">{error}</span>
+ <span className="text-danger">{error}</span>
  {self.render_spinner()}
  </div>
  ); """)