Add style to change profile button at home

src/app/pages/events/events.page.html

@@ -10,19 +10,11 @@
       </ion-label>
     </ion-item>
   <ion-buttons slot="end">
-  <!-- <label class="switch">
-    <input type="checkbox" id="togBtn">
-    <div (click)="changeProfile()">
-    <div class="slider round">
-    <span class="mdgpr">MDGPR</span><span class="pr">PR</span>
-  </div>
-  </div>
-</label> -->
 <div class="toggleBox">
   <div (click)="changeProfile()" class="toggle">
     <input type="checkbox">
     <label for="" class="onbtn">PR</label>
-    <label for="" class="ofbtn">MD</label>
+    <label for="" class="ofbtn">MDGPR</label>
   </div> 
 </div>
 </ion-buttons>

src/app/pages/events/events.page.scss

@@ -162,115 +162,14 @@ ion-toolbar{
       color: #666666;
       font-size: 20px;
     }
-/* TOGGLE BUTTON */
+    /* NEW CSS FOR TOGGLE BUTTON */
-    .switch {
+    .toggleBox{
-      position: relative;
-      display: inline-block;
-      width: 90px;
-      height: 34px;
-      float: right;
       margin:20px 20px 0 0;
     }
-    
-    .switch input {display:none;}
-    
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: #ffffff;
-      border: 1px solid #e16817;
-      color: #e16817;
-      -webkit-transition: .4s;
-      transition: .4s;
-    }
-    
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 23.5px; /* 26px;  */
-      width: 24px;
-      left: 4px;
-      bottom: 4px;
-      background-color: #ffffff;
-      -webkit-transition: .4s;
-      transition: .4s;
-    }
-
-    input:checked + .slider {
-      background-color: #e16817;
-    }
-    
-    input:focus + .slider {
-      box-shadow: 0 0 1px #2196F3;
-    }
-    
-    input:checked + .slider:before {
-      -webkit-transform: translateX(55px);
-      -ms-transform: translateX(55px);
-      transform: translateX(55px);
-    }
-    
-    /*------ ADDED CSS ---------*/
-    .pr
-    {
-      display: none;
-      text-align: left !important;
-      left: 25px !important; 
-      color: white;
-    }
-    .mdgpr
-    {
-
-      left: 58px !important;
-      color: #e16817;
-    }
-    
-    .pr, .mdgpr
-    {
-      position: absolute;
-      transform: translate(-50%,-50%);
-      top: 50%;
-      left: 50%;
-      font-size: 12px;
-      font-family: Verdana, sans-serif;
-    }
-    
-    input:checked+ .slider .pr
-    {display: block;
-      background:#e16817;
-    }
-    
-    input:checked + .slider .mdgpr
-    {display: none;
-    }
-    
-    /*--------- END --------*/
-    
-    /* Rounded sliders */
-    .slider.round {
-      border-radius: 34px;
-      
-    }
-    
-    .slider.round:before {
-      border-radius: 50%;
-      border: 1px solid #e16817;
-    }
-
-    .logout-button{
-      padding: 15px;
-      color:red;
-    }
-
-    /* NEW CSS FOR TOGGLE BUTTON */
     input[type="checkbox"]{
       position: relative;
-      width: 100px;
+      width: 96px;
-      height: 40px;
+      height: 34px;
       background: #ffffff;
       -webkit-appearance: none;
       border-radius: 20px;
@@ -278,7 +177,7 @@ ion-toolbar{
       transition: .4s;
       /* box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
       cursor: pointer;
-      border:1px solid red;
+      border:1px solid #e16817;
     }
     input:checked[type="checkbox"]{
       background: #e16817;
@@ -288,16 +187,16 @@ ion-toolbar{
       position: absolute;
       content: "";
       left: 0;
-      width: 38px;
+      width: 30px;
-      height: 38px;
+      height: 30px;
       background: #fff;
       border-radius: 50%;
       /* transform: scale(1.1); */
       box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
-      border:1px solid red;
+      border:1px solid #e16817;
     }
     input:checked[type="checkbox"]::before{
-      left: 60px;
+      left: 65px;
 
     }
     .toggle{
@@ -311,7 +210,7 @@ ion-toolbar{
       position: absolute;
       color: #fff;
       font-weight: 600;
-      font-size: 16px;
+      font-size: 12px;
       pointer-events: none;
     }
     .onbtn{