ReactJS

1
.userBox {
2
    cursor: pointer;
3
    display: flex;
4
    align-items: center;
5
}
6

7
.userBox:hover span {
8
    color: var(--orange);
9
}
10
.userBox:hover .avatarBox {
11
    box-shadow: 0 0 0 1px var(--orange);
12
}
13

14
.avatarBox {
15
    width: 60px;
16
    height: 60px;
17
    padding: 5px;
18
    border-radius: 100%;
19
    box-shadow: none;
20
}
21

22
.avatarImage {
23
    width: 100%;
24
    height: 100%;
25
    object-fit: cover;
26
    border-radius: 100%;
27
}
28

29
.username {
30
    display: none;
31
}
32

33
@media all and (min-width: 1024px) {
34
    .username {
35
        display: flex;
36
    }
37
}
38