removing inline css

princekhunt · Jul 21, 2024 · 390d3d7 · 390d3d7
1 parent c3e2855
commit 390d3d7
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 41 deletions.
diff --git a/assets/css/chat.css b/assets/css/chat.css
@@ -84,11 +84,6 @@
   width: 850px;
 }
 
-#send_btn {
-  margin-top: 16px;
-  height: 40px;
-}
-
 .container-darker::after {
   content: "";
   clear: both;

diff --git a/assets/css/chat/FriendRequest.css b/assets/css/chat/FriendRequest.css
@@ -11,4 +11,8 @@
     /* increase size of button */
     padding: 20px 25px;
     border-radius: 12px;
-}
+}
+
+i.size {
+    font-size: 100px;
+ }
diff --git a/assets/css/chat/chats.css b/assets/css/chat/chats.css
@@ -175,4 +175,15 @@
   color:rgb(200, 57, 57); 
   text-align: right; 
   margin-bottom: 5vh;
+}
+
+.input-textarea{
+  border-radius: 15px;
+}
+
+.send-button{
+  border-radius: 50% !important;
+  margin-top: 16px;
+  height: 40px;
+
 }
diff --git a/assets/css/registration/AnonymousDirectLogin.css b/assets/css/registration/AnonymousDirectLogin.css
@@ -95,4 +95,8 @@ html {
 
 .captcha-container{
   margin-top: 2rem;
+}
+
+.processing-text{
+  text-align: center;
 }
diff --git a/assets/css/registration/Login.css b/assets/css/registration/Login.css
@@ -149,4 +149,29 @@ html {
   margin-top:5rem; 
   border-radius: 50%;
   opacity: 0.8;
+}
+
+.login-container{
+  position: relative;
+}
+
+.antiquewhite{
+  color: antiquewhite;
+
+}
+
+.error-message{
+  color: rgb(253, 84, 84); 
+  font-size: 18px; 
+  font-weight: bold; 
+  margin-top: 10px;
+}
+
+.fact-title{
+  color:cornsilk; 
+  margin-top: 2rem;
+}
+
+.fact{
+  color: #ccc;
 }
diff --git a/assets/css/registration/Signup.css b/assets/css/registration/Signup.css
@@ -187,4 +187,36 @@ html {
   margin-top:3rem; 
   border-radius: 50%;
   opacity: 0.8;
+}
+
+.fact-title{
+  color:cornsilk; 
+  margin-top: 2rem;
+}
+
+.fact{
+  color: #ccc;
+}
+
+.antiquewhite{
+  color: antiquewhite;
+}
+
+.name-field{
+  margin-bottom:2px;
+}
+
+.signup-title{
+  color:cornsilk;
+}
+
+.login-container{
+  position: relative;
+}
+
+.error-message{
+  color: rgb(253, 84, 84); 
+  font-size: 18px; 
+  font-weight: bold; 
+  margin-top: 10px;
 }
diff --git a/assets/css/registration/registration_home.css b/assets/css/registration/registration_home.css
@@ -266,3 +266,17 @@ html {
     transform: scale(1);
   }
 }
+
+.fact-title{
+  color:#686868; 
+  margin-top: 2rem; 
+  margin-bottom: 0;
+}
+
+.fact{
+  color: #686868;
+}
+
+.credits{
+  text-align: center;
+}
diff --git a/chat/templates/chat/FriendRequest.html b/chat/templates/chat/FriendRequest.html
@@ -2,11 +2,6 @@
 {% load static %}
 
 {% block content %}
-<style>
-    i.size {
-       font-size: 100px;
-    }
- </style>
 <link rel="stylesheet" href="{% static 'css/chat/FriendRequest.css' %}">
 <div class="text-center">
     <h1 id="request-text">You have received friend request from: <u>{{RequestFrom}}</u></h1>

diff --git a/chat/templates/chat/chats.html b/chat/templates/chat/chats.html
@@ -4,7 +4,7 @@
 {% block content %}
 <link rel="stylesheet" href="{% static 'css/chat/chats.css' %}">
 
-<div style="margin-top: 0px">
+<div>
     <h3>{{friend.name}}</h3>
     <span id="live-notification-dot" class="logged-in">● </span><small id="live-notification-text">Connecting...</small>
 </div>
@@ -23,7 +23,7 @@ <h3>{{friend.name}}</h3>
         {% csrf_token %}
         <div class="input-group mb-3">
             <div class="input-group-prepend">
-                <textarea style="border-radius: 15px;" type="text" placeholder=" Enter your message" name="message"
+                <textarea class="input-textarea" type="text" placeholder=" Enter your message" name="message"
                     id="msg_field" autocomplete="off" required></textarea> &nbsp; &nbsp;
                     <label class="select" for="MessageDestroy">
                         <select id="MessageDestroy" required="required">
@@ -37,7 +37,7 @@ <h3>{{friend.name}}</h3>
                           <option value="3600">1 hour</option>
                         </select>
                       </label>&nbsp; &nbsp;
-                <button style="border-radius: 50%;" type="submit" name="send" class="btn btn-primary" id="send_btn"> <i
+                <button type="submit" name="send" class="btn btn-primary send-button" id="send_btn"> <i
                         class="fa-solid fa-paper-plane"></i></button>
 
             </div>

diff --git a/registration/templates/registration/AnonymousDirectLogin.html b/registration/templates/registration/AnonymousDirectLogin.html
@@ -11,7 +11,7 @@
     {% csrf_token %}
     <div id="login-container">
       <span class="DirectLoginLoader"></span>
-      <h1 style="text-align: center" id="processing">Checking Browser...</h1>
+      <h1 class="processing-text" id="processing">Checking Browser...</h1>
       <small>This temporary account will be deleted once you Logout.</small>
       <div class="captcha-container">
         {{ form.hcaptcha }}

diff --git a/registration/templates/registration/Home.html b/registration/templates/registration/Home.html
@@ -21,11 +21,11 @@
       <button onclick="anonymousLogin();">Anonymous Direct Login</button>
     </div>
     <b>
-      <p style="color:#686868; margin-top: 2rem; margin-bottom: 0;">Do you know?</p>
+      <p class="fact-title">Do you know?</p>
     </b>
-    <small style="color: #686868;">{{fact}}</small>
+    <small class="fact">{{fact}}</small>
     <div class="buttons">
-      <h5 style="text-align: center" id="credits">An open source project, Initiated by
+      <h5 class="credits" id="credits">An open source project, Initiated by
 
         <a target="_blank" href="https://linkedin.com/in/princekhunt">Prince Khunt</a> &
         <a target="_blank" href="https://www.linkedin.com/in/viraj-bhingradiya-720b39216">Viraj Bhingradiya</a>. Give a

diff --git a/registration/templates/registration/Login.html b/registration/templates/registration/Login.html
@@ -40,11 +40,11 @@
         </svg>
 
 
-        <div style="position: relative;" id="login-container">
-            <h1 style="color: antiquewhite;">PrivatePing - Login</h1>
+        <div class="login-container" id="login-container">
+            <h1 class="antiquewhite">PrivatePing - Login</h1>
             <div id="login-form">
                 <img src="{% static 'images/user/login.gif' %}" alt="Loading" id="loading-gif" height="40%" width="40%">
-                <h1 style="color: antiquewhite;" id="processing"></h1>
+                <h1 class="antiquewhite" id="processing"></h1>
                 <form id="LoginForm" method="post">{% csrf_token %}
                     <div id="username-form">
                         <div class="input-container">
@@ -61,15 +61,14 @@ <h1 style="color: antiquewhite;" id="processing"></h1>
                         </div>
                     </div>
                     {% if error %}
-                    <div id="error-field"
-                        style="color: rgb(253, 84, 84); font-size: 18px; font-weight: bold; margin-top: 10px;">Invalid
+                    <div class="error-message" id="error-field">Invalid
                         username or password!</div>
                     {% endif %}
             </div>
             </form>
-            <p id="err_mssg" style="color: rgb(253, 84, 84); font-size: 18px; font-weight: bold; margin-top: 10px;"></p>
-            <p style="color:cornsilk; margin-top: 2rem;">Do you know?</p>
-            <small style="color: #ccc;">{{fact}}</small>
+            <p class="error-message" id="err_mssg"></p>
+            <p class="fact-title">Do you know?</p>
+            <small class="  ">{{fact}}</small>
             <div>
                 <button class="btn-lg btn-primary back-btn" onclick="goback();"><i class="fa fa-arrow-left"
                         aria-hidden="true"></i></button>

diff --git a/registration/templates/registration/Signup.html b/registration/templates/registration/Signup.html
@@ -39,16 +39,15 @@
             </g>
         </svg>
 
-        <div style="position: relative;" id="login-container">
-            <h1 style="color:cornsilk;">Let's embark a journey towards privacy!</h1>
+        <div class="login-container" id="login-container">
+            <h1 class="signup-title">Let's embark a journey towards privacy!</h1>
             <div id="login-form">
-                <!--<img src="{% static 'images/user/signup.gif' %}" alt="Loading" id="loading-gif" height="40%" width="40%">-->
                 <span class="userloader"></span>
-                <h1 style="color: antiquewhite;" id="processing"></h1>
+                <h1 class="antiquewhite" id="processing"></h1>
                 <form id="LoginForm" method="post">{% csrf_token %}
 
                     <div id="name-field">
-                        <p style="color: antiquewhite; margin-bottom:2px;">What should we call you?</p>
+                        <p class="name-field antiquewhite">What should we call you?</p>
                         <div class="input-container">
                             <input type="text" class="input-field input-field-1" id="name" name="name"
                                 placeholder="Name" autocomplete="off">
@@ -57,43 +56,41 @@ <h1 style="color: antiquewhite;" id="processing"></h1>
                     </div>
 
                     <div id="username-field">
-                        <p style="color: antiquewhite;">Enter Username</p>
+                        <p class="antiquewhite">Enter Username</p>
                         <div class="input-container">
                             <input type="text" class="input-field input-field-1" id="username" name="username"
                                 placeholder="Username" autocomplete="off">
                             <button class="login-button" id="username-button">&rarr;</button>
                         </div>
-                        <p id="username-error-field"
-                            style="color: rgb(253, 84, 84); font-size: 18px; font-weight: bold; margin-top: 10px;"></p>
+                        <p class="error-message" id="username-error-field"></p>
                     </div>
 
                     <div id="password-field-1">
-                        <p style="color: antiquewhite;">Enter Password</p>
+                        <p class="antiquewhite">Enter Password</p>
                         <div class="input-container">
                             <input type="password" class="input-field input-field-2" id="password-1" name="password1"
                                 placeholder="Password" autocomplete="off">
                             <button class="login-button" id="password-1-button"><span>&rarr;</span></button>
                         </div>
-                        <p style="color: antiquewhite;" id="password-text"></p>
+                        <p class="antiquewhite" id="password-text"></p>
 
                     </div>
 
                     <div id="password-field-2">
-                        <p style="color: antiquewhite;">Confirm Password</p>
+                        <p class="antiquewhite">Confirm Password</p>
                         <div class="input-container">
                             <input type="password" class="input-field input-field-2" id="password-2" name="password2"
                                 placeholder="Confirm Password" autocomplete="off">
                             <button type="submit" class="login-button" id="login-button"><span>&#10003;</span></button>
                         </div>
                         {% if error %}
-                        <div id="error-field"
-                            style="color: rgb(253, 84, 84); font-size: 18px; font-weight: bold; margin-top: 10px;">
+                        <div class="error-message" id="error-field">
                             Invalid username or password!</div>
                         {% endif %}
                     </div>
                 </form>
-                <p style="color:cornsilk; margin-top: 2rem;">Do you know?</p>
-                <small style="color: #ccc;">{{fact}}</small>
+                <p class="fact-title">Do you know?</p>
+                <small class="fact">{{fact}}</small>
                 <div>
                     <button class="btn-lg btn-primary back-btn" onclick="goback();"><i class="fa fa-arrow-left"
                             aria-hidden="true"></i></button>