From d46716f8c4324c9d237d18920740404e2cb75c20 Mon Sep 17 00:00:00 2001
From: Lukas Brabec <lbrabec@redhat.com>
Date: Jan 24 2019 13:55:22 +0000
Subject: css cleanup


---

diff --git a/src/index.css b/src/index.css
index 28a2930..c8849d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,21 +16,19 @@ body {
   margin: 0;
   padding: 0;
   background-color: #fff;
-  
- 
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
   padding-bottom: 10rem;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+h1 {
+  font-size: 1.25rem !important;
 }
 
-.masthead + .container,.timelinebox {
-  padding-top: 30px!important;
+.card-body ul {
+  margin-block-end: 0px;
 }
 
 .navbar {
@@ -42,29 +40,19 @@ code {
   border-bottom-width: 1px;
 }
 
-.padded-first {
-  padding-bottom: 10px;
+.bluebox {
+  padding-top: 0.5em!important;
+  background-color: #f8f9fa!important;
+  padding-bottom: 0.8em;
+  border-bottom-color: rgb(222, 226, 230);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  margin-bottom: 0.5em;
 }
 
 .padded {
-  padding-top: 50px;
-  padding-bottom: 10px;
-}
-
-.footer {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 0.5rem;
-  text-align: center;
-  color: #777;
-  font-size: 0.8em;
-  background-color: #eee;
-  box-shadow:inset rgb(211, 211, 211) 0px 6px 10px -4px;
-  border-top-color:rgb(204, 204, 204);
-  border-top-style: solid;
-  border-top-width: 1px;
+  padding-top: 0.5em;
+  
 }
 
 .timeline { 
@@ -98,47 +86,22 @@ code {
   font-size: 0.5em;
 }
 
-.timelinebox {
-  background-color: #f8f9fa!important;
-  padding-bottom: 30px;
-  border-bottom-color: rgb(222, 226, 230);
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-}
-
 .btn-wrap-text {
-    white-space: normal !important;
-    word-wrap: break-word !important;
-}
-
-div.nobullet {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    margin-bottom: 0.5em;
-    background-color: #fefefe;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    border-style: solid;
-    border-color: #ddd;
-    border-width: 1px;
+  white-space: normal !important;
+  word-wrap: break-word !important;
 }
 
-
 .card {
   margin-bottom: 0.5em;
 }
 
-.topmargin{
-  margin-top: 1em;
-}
-
-.btn-tag{
+.btn-tag {
     margin-right: 0.5em;
+    margin-bottom: 0.5em;
 }
 
 ol.steps > li {
-  padding-bottom: 0.6em;
+  padding-bottom: 0.4em;
 }
 
 .card-header {
@@ -153,6 +116,18 @@ ol.steps > li {
   font-size: 0.9em !important;
 }
 
-h1 {
-  font-size: 1.25rem !important;
-}
+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0.5rem;
+  text-align: center;
+  color: #777;
+  font-size: 0.8em;
+  background-color: #eee;
+  box-shadow:inset rgb(211, 211, 211) 0px 6px 10px -4px;
+  border-top-color:rgb(204, 204, 204);
+  border-top-style: solid;
+  border-top-width: 1px;
+}
\ No newline at end of file
diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js
index 19bffb7..f850bd4 100644
--- a/src/landingpage/LandingPage.js
+++ b/src/landingpage/LandingPage.js
@@ -33,7 +33,7 @@ class LandingPage extends Component {
     render() {
         return (
             <Layout>
-                <div className="timelinebox">
+                <div className="bluebox">
                 <Container>
                     <Row>
                         <div className="col-md-12">
@@ -59,7 +59,7 @@ class LandingPage extends Component {
                     </Row>
 */}
                     <Row className="padded">
-                        <div className="col-md-12" >
+                        <div className="col-md-12 padded" >
                             <Link className="btn btn-primary btn-block btn-wrap-text btn-lg active" to="/wizard" role="button">
                                 Do you have some spare time? Feeling like helping others? Wanna improve Fedora? Click here!
                             </Link>
diff --git a/src/landingpage/Timeline.js b/src/landingpage/Timeline.js
index f4da9cc..a9fb52f 100644
--- a/src/landingpage/Timeline.js
+++ b/src/landingpage/Timeline.js
@@ -45,7 +45,7 @@ class Timeline extends Component {
         });
         return (
             <div>
-                <h1 className="padded-first">Current development schedule{' '}
+                <h1 className="padded">Current development schedule{' '}
                     <a target="_blank" rel="noopener noreferrer" href="https://fedorapeople.org/groups/schedule/" className="smallsuper">
                         <i className="fas fa-external-link-alt"></i>
                     </a>
diff --git a/src/layout/Footer.js b/src/layout/Footer.js
index 4482de0..0abcdeb 100644
--- a/src/layout/Footer.js
+++ b/src/layout/Footer.js
@@ -6,7 +6,7 @@ class Footer extends Component {
         return (
             <div className="footer">
                 <div className="container">
-                    <a href="https://pagure.io/fedora-qa/landingpage">Source</a> on Pagure <span className="float-right">version 0.1.0</span>
+                        <a href="https://pagure.io/fedora-qa/landingpage">Source</a> on Pagure <span className="float-right">version 0.1.0</span>
                 </div>
             </div>
         );
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index 3cc2ee4..b017421 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -20,12 +20,12 @@ class Wizard extends Component {
     render() {
         return (
             <Layout>
-                <div className="timelinebox">
+                <div className="bluebox">
                 <Container>
                     <WizardForm apiurl={oraculumApiUrl_v1} set_actions={this.set_actions.bind(this)}/>
                 </Container>
                 </div>
-                <Container className="topmargin">
+                <Container>
                     <Row>
                         <div className="col-md-12">
                             <Actions data={this.state.actions}/>
diff --git a/src/wizard/WizardForm.js b/src/wizard/WizardForm.js
index 300f145..44d25b8 100644
--- a/src/wizard/WizardForm.js
+++ b/src/wizard/WizardForm.js
@@ -82,7 +82,7 @@ class WizardForm extends Component {
             return (
                 <Row>
                     <div class="col-md-12">
-                        <h1>Make your choice!</h1>
+                        <h1 className="padded">Make your choice!</h1>
                         <Tags key={this.state.selected_provider.provider} data={this.state.selected_provider_tags.sort()} handler={this.tag_handler.bind(this)} />
                     </div>
                 </Row>
@@ -92,8 +92,8 @@ class WizardForm extends Component {
     render() {
         const providers = [3, 72].map(duration => {
             const duration_providers = this.state.providers.filter(p => p.duration === duration).map(p => {
+                const btncolor = (this.state.selected_provider.provider === p.provider)? 'success' : 'primary'
                 return (
-
                     <div className="card">
                         <div className="card-body">
                             <Row key={p.provider}>
@@ -101,9 +101,9 @@ class WizardForm extends Component {
                                     <strong>{p.scope} - {p.name}</strong><br />{p.description}
                                 </div>
                                 <div className="col-md-2">
-                                    <button className="btn btn-primary btn-sm btn-block btn-wrap-text float-right" onClick={event => this.provider_selected(p)}>
+                                    <Button className="btn-sm btn-block btn-wrap-text float-right" color={btncolor} onClick={event => this.provider_selected(p)}>
                                         Tell me more!
-                            </button>
+                                    </Button>
                                 </div>
                             </Row>
                         </div>
@@ -113,7 +113,7 @@ class WizardForm extends Component {
 
             return (
                 <div key={duration}>
-                    <h1>{durationString[duration]}</h1>
+                    <h1 className="padded">{durationString[duration]}</h1>
                     {duration_providers}
                 </div>
             )
@@ -151,7 +151,7 @@ class Tags extends Component {
 
     render() {
         var x = this.props.data.map(t => (
-            <Button onClick={() => this.selected(t)} className="btn-tag" color={this.is_selected(t)}>{t}</Button>
+            <Button onClick={() => this.selected(t)} className="btn-sm btn-tag" color={this.is_selected(t)}>{t}</Button>
         ));
         return (<div>{x}</div>)
     }