# 23st July Report

## Progress

**08:40** - Entering BMW Lab.

### Add CSS style

+ Card
In html change the code

<ion-card [ngClass]="{'card-today': !click, 'card-today-click': click}" (click)="openDetail()" tappable>
            <ion-item lines="none">
              <ion-label slot="start">
                <h2 [ngClass]="{'text-click': click}">Client Name</h2>
              </ion-label>
              <ion-label>
                <h2 [ngClass]="{'text-click': click}" style="text-align: right">10:00 AM</h2>
              </ion-label>
            </ion-item>
            <ion-item lines="none">
              <ion-label slot="start">
                <h2 [ngClass]="{'text-click': click}">Address</h2>
              </ion-label>
            </ion-item>
          </ion-card>

Add css file.

.text-click {
    color: white;
}

+ Resize ion-item

In html add.

<ion-item>
      <p style="color:white; font-weight: lighter; margin: 0px;">TEL</p>
    </ion-item>
    <ion-item lines="none">
      <ion-label>
        <h1 style="color:white">08123112123</h1>
      </ion-label>
      <ion-button class=" button-content" size="small">Call</ion-button>
    </ion-item>

In css addd.

ion-item {
    --min-height: 0px !important;
}

+ Add border

In app.css / global.css add.

.my-custom-modal-css .modal-wrapper {
    height: 70%;
    top: 30%;
    position: absolute;
    display: block;
    border-radius: 10px;
}

+ Resize modal page

Not finished because it was difficult and after discussing with Aldy there was no need to change its size. Need to discuss with Johnny.

### Result

<center>
<img src="https://imgur.com/25nFVnt.png" stye="height" 300px>
</center>
<br>

To do next
+ Change font color when click
+ Add border in modal
+ Change ion-list size

**13:00** - Because electricity goes out so I leave BMW Lab early.

###### tags: `on-intern`