fix css

my-blog/static/css/pds.css

@@ -1,3 +1,5 @@
+@import url('./style.css');
+
 .pds-container {
 }
 
@@ -19,7 +21,7 @@
 .pds-search-form {
     display: flex;
     justify-content: center;
-				margin: 0px 20px;
+				padding: 0px 20px;
 }
 
 .form-group {
@@ -28,19 +30,25 @@
 }
 
 .form-group input {
-    padding: 10px;
+    padding: 8px;
     border: 1px solid #ddd;
-    border-radius: 4px;
+    border-radius: 4px 0 0 4px;
 				font-size: 14px;
 				width: 600px;
+    outline: none;
+    transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.form-group input:focus {
+    border-color: var(--theme-color, #f40);
 }
 
 .form-group button {
-    padding: 10px 15px;
+    padding: 9px 15px;
     background: #1976d2;
     color: white;
     border: none;
-    border-radius: 4px;
+    border-radius: 0 4px 4px 0;
     cursor: pointer;
     display: flex;
     align-items: center;

my-blog/static/css/style.css

@@ -139,7 +139,7 @@ a.view-markdown:any-link {
     grid-area: header;
     background: #ffffff;
     border-bottom: 1px solid #d1d9e0;
-    padding: 16px 24px;
+    padding: 17px 24px;
     position: sticky;
     top: 0;
     z-index: 100;
@@ -723,7 +723,7 @@ article.article-content {
 .footer-social a {
     color: var(--dark-gray) !important;
     text-decoration: none !important;
-    font-size: 20px;
+    font-size: 25px;
     transition: all 0.2s ease;
 }
 

oauth/src/App.css

@@ -139,7 +139,7 @@ body {
   /* align-items: center; */
   max-width: 800px;
   margin: 0 auto;
-  padding: 25px 0;
+  padding: 30px 0;
   width: 100%;
 }
 
@@ -287,7 +287,6 @@ body {
 .auth-section {
   display: flex;
   align-items: center;
-  gap: 8px;
 }
 
 .auth-section.search-bar-layout {
@@ -302,10 +301,10 @@ body {
 .auth-section.search-bar-layout .handle-input {
   flex: 1;
   margin: 0;
-  padding: 10px 15px;
-  font-size: 16px;
+  padding: 9px 15px;
+  font-size: 13px;
   border: 1px solid var(--border);
-  border-radius: 8px 0 0 8px;
+  border-radius: 4px 0 0 4px;
   background: var(--background);
   outline: none;
   transition: border-color 0.2s;
@@ -319,12 +318,13 @@ body {
 }
 
 .auth-section.search-bar-layout .auth-button {
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 4px 4px 0;
   border: 1px solid var(--primary);
   border-left: none;
   margin: 0;
-  padding: 10px 15px;
-  height: 40px;
+  padding: 9px 15px;
+  min-width: 50px;
+  min-height: 30px;
 }
 
 /* Auth Button */
@@ -332,15 +332,26 @@ body {
   background: var(--primary);
   color: white;
   border: none;
-  border-radius: 6px;
-  padding: 8px 16px;
+  border-radius: 4px;
+  padding: 9px 15px;
   font-weight: 700;
   cursor: pointer;
   transition: background 0.2s;
-  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
+  min-width: 50px;
+  min-height: 30px;
+}
+
+/* Loading spinner for auth button */
+.auth-button.loading i {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 .auth-button:hover {

oauth/src/components/AuthButton.jsx

@@ -68,9 +68,9 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {
         type="button"
         onClick={handleSubmit}
         disabled={isLoading || !handleInput.trim()}
-        className="auth-button"
+        className={`auth-button ${isLoading ? 'loading' : ''}`}
       >
-        {isLoading ? 'Loading...' : <i className="fab fa-bluesky"></i>}
+        <i className={isLoading ? "fas fa-spinner" : "fab fa-bluesky"}></i>
       </button>
     </div>
   )