refactor: style using boostrap classes instead of custom style

N5GEH · Jul 18, 2022 · 275bd41 · 275bd41
1 parent 01d4ca2
commit 275bd41
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 51 deletions.
diff --git a/app/Entirety/projects/templates/projects/index.html b/app/Entirety/projects/templates/projects/index.html
@@ -4,10 +4,10 @@
 {% block title %}Projects{% endblock %}
 
 {% block content %}
-    <div class="container mt-5">
+     <div class="container mt-5">
         <div class="row">
             <div class="row height d-flex justify-content-center align-items-center">
-                <div class="col-md-2">
+                <div class="col-md-1">
                     <span class="input-group-btn">
                         <div class="row">
                             <a href="{% url 'projects:create' %}" class="btn btn-secondary btn-lg">
@@ -16,14 +16,14 @@
                         </div>
                     </span>
                 </div>
-                <div class="col-md-6">
+                <div class="col-md-8">
                     <form action="">
-                        <div id="custom-search-input">
-                            <div class="input-group col-md-12">
-                                <input name="search" type="text" class="form-control input-lg"
+                        <div class="p-3 border border-light rounded-pill bg-light">
+                            <div class="input-group col-md-12 border-0 shadow-none">
+                                <input name="search" type="text" class="form-control input-lg border-light rounded-pill"
                                        placeholder="Search projects by name"/>
                                 <span class="input-group-btn">
-                                <button class="btn btn-info btn-lg" type="submit" value="search">
+                                <button class="btn btn-info btn-lg bg-light border-light" type="submit" value="search">
                                     <i class="bi-search"></i>
                                 </button>
                                 </span>

diff --git a/app/Entirety/static/scss/style.scss b/app/Entirety/static/scss/style.scss
@@ -11,49 +11,6 @@
   background-color: #292e34;
 }
 
-// custom search bar
-#custom-search-input{
-    padding: 3px;
-    border: solid 1px #E4E4E4;
-    border-radius: 6px;
-    background-color: #fff;
-}
-
-#custom-search-input input{
-    border: 0;
-    box-shadow: none;
-}
-
-#custom-search-input button{
-    margin: 2px 0 0 0;
-    background: none;
-    box-shadow: none;
-    border: 0;
-    color: #666666;
-    padding: 0 8px 0 10px;
-    border-left: solid 1px #ccc;
-}
-
-#custom-search-input a{
-    margin: 2px 0 0 0;
-    background: none;
-    box-shadow: none;
-    border: 0;
-    color: #666666;
-    padding: 0 8px 0 10px;
-    border-left: solid 1px #ccc;
-}
-
-#custom-search-input button:hover{
-    border: 0;
-    box-shadow: none;
-    border-left: solid 1px #ccc;
-}
-
-#custom-search-input .bi-search{
-    font-size: 23px;
-}
-
 // card on hover
 .card:hover{
     transform:scale(1.05);
@@ -63,4 +20,4 @@
 .card-img-top{
    height: 200px;
    object-fit: fill;
-}
+}