···

       
150
       
150
       
 
       
      margin-bottom: 1rem;

     

       
151
       
151
       
 
       
    }

     

       
152
       
152
       
 
       


     

       
153
       
153
       
+
       
    .empty-state button {

     

       
154
       
154
       
+
       
      margin-top: 2rem;

     

       
155
       
155
       
+
       
      padding: 0.75rem 2rem;

     

       
156
       
156
       
+
       
      background: var(--accent);

     

       
157
       
157
       
+
       
      color: var(--white);

     

       
158
       
158
       
+
       
      border: none;

     

       
159
       
159
       
+
       
      border-radius: 8px;

     

       
160
       
160
       
+
       
      font-size: 1rem;

     

       
161
       
161
       
+
       
      font-weight: 600;

     

       
162
       
162
       
+
       
      cursor: pointer;

     

       
163
       
163
       
+
       
      transition: all 0.2s;

     

       
164
       
164
       
+
       
    }

     

       
165
       
165
       
+
       


     

       
166
       
166
       
+
       
    .empty-state button:hover {

     

       
167
       
167
       
+
       
      background: color-mix(in srgb, var(--accent) 90%, black);

     

       
168
       
168
       
+
       
      transform: translateY(-2px);

     

       
169
       
169
       
+
       
    }

     

       
170
       
170
       
+
       


     

       
153
       
171
       
 
       
    .loading {

     

       
154
       
172
       
 
       
      text-align: center;

     

       
155
       
173
       
 
       
      padding: 4rem 2rem;

     
···

       
259
       
277
       
 
       
										? html`

     

       
260
       
278
       
 
       
                  <div class="register-card" @click=${this.handleRegisterClick}>

     

       
261
       
279
       
 
       
                    <div class="register-icon">+</div>

     

       
262
       
262
       
-
       
                    <div class="register-text">Register for Class</div>

     

       
280
       
280
       
+
       
                    <div class="register-text">Register for a Class</div>

     

       
263
       
281
       
 
       
                  </div>

     

       
264
       
282
       
 
       
                `

     

       
265
       
283
       
 
       
										: ""

     
···

       
273
       
291
       
 
       
          <div class="empty-state">

     

       
274
       
292
       
 
       
            <h2>No classes yet</h2>

     

       
275
       
293
       
 
       
            <p>You haven't been enrolled in any classes.</p>

     

       
276
       
276
       
-
       
          </div>

     

       
277
       
277
       
-
       
          <div class="classes-grid">

     

       
278
       
278
       
-
       
            <div class="register-card" @click=${this.handleRegisterClick}>

     

       
279
       
279
       
-
       
              <div class="register-icon">+</div>

     

       
280
       
280
       
-
       
              <div class="register-text">Register for Class</div>

     

       
281
       
281
       
-
       
            </div>

     

       
294
       
294
       
+
       
            <button @click=${this.handleRegisterClick}>Register for a Class</button>

     

       
282
       
295
       
 
       
          </div>

     

       
283
       
296
       
 
       
        `

     

       
284
       
297
       
 
       
			}